problema menu desplegable

[Ruben_JD]

Hola alonso_50, es algo complicado lo que quieres hacer sin definir el ancho de cada li, pero esto te puede servir, le modifique un poco a tu codigo.

Código CSS:

ul#menu{
margin-left: 3em;
}
 
ul#menu li{
display: inline;
float: left;
padding: 0.5em;
border-left: 1px solid #cc6633;
border-right: 1px solid #493a22;
background: #493a22; /* Old browsers */
background: -moz-linear-gradient(top, #493a22 0%, #cc6633 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#493a22), color-stop(100%,#cc6633)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #493a22 0%,#cc6633 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #493a22 0%,#cc6633 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #493a22 0%,#cc6633 100%); /* IE10+ */
background: linear-gradient(top, #493a22 0%,#cc6633 100%); /* W3C */
padding: .4em 0;
font-weight: 700;
color: #f9f8f4;
}
ul#menu li a{
    display: block;
    padding: 5px;
    color: white;
}
ul#menu li ul{
display: none;
position:absolute;
 
}
 
ul#menu li:hover ul{
display:block;
margin:0;
padding:0;
margin-top:7px;/* ojo con la separacion esto puede hacer
                     que el efecto sobre del boton se pierda */
/*margin-left:-0.6em;*/
}
ul#menu li:hover ul li{
clear:both;
display: block;
border:none;
}
.anchofijo{
    width: 150px;
}
 

Código HTML:

<div>
<ul id ="menu">
<li><a href="#" class="seleccionado">Principal</a></li>
<li class="anchofijo"><a href="aprender.php">Quiero aprender ...</a>
<ul>
<li class="anchofijo"><a href="#">Francés</a></li>
<li class="anchofijo"><a href="#">Inglés</a></li>
<li class="anchofijo"><a href="#">Alemán</a></li>
</ul>
</li>
<li><a href="muro.php">Muro</a></li>
</ul>
<div class="clear"></div>
</div>
 

pruebalo y me comentas si te sirve o no.

Saludos