problema menu desplegable

[alonso_50]

Buenos días foreros,

Resulta que tengo un problemilla con un menu desplegable en CSS, quiero hacer que los elementos del submenu tengan el mismo tamaño que el elemento padre de una manera un poco "elegante" y no diciendole directamente la width que tiene que tener... Hay alguna manera para que estos elementos "hereden" el tamaño de elemento padre?

aqui os paso el código HTML:

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


Y el código CSS de la parte del menu horizontal:


.fondo{
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;

}
#menu ul{
margin-left: 3em;
}

#menu ul li{
display: inline;
float: left;
padding: 0.5em;
border-left: 1px solid #cc6633;
border-right: 1px solid #493a22;

font-weight: 700;
color: #f9f8f4;
}
#menu ul li ul{
display: none;
position:absolute;

}

#menu ul li:hover ul{
display:block;

margin:0;
padding:0;
margin-top:0.5em;
margin-left:-0.6em;


}
#menu ul li:hover ul li{
clear:both;
display: block;

border:none;

}

[kseso?]

¿Quiere que su ul de segundo nivel tenga el mismo tamaño (¿Ancho? ¿alto? ¿ambos?) que el li de primer nivel (essu padre) teniendo en cuenta que la lista tendrá varias opciones (li) que desplegarán en vertical)?

Creo que debo haber comprendido mal.

[alonso_50]

Exactamente, lo único que quiero es la misma anchura, la altura no hace falta...no consigo hacerlo ... :S

[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

[alonso_50]

Ha ido genial Ruben_ JD, al final lo conseguí!

Un saludo y muchísimas gracias!