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;
}