Hola a todos.
Tengo un problema con un menú desplegable con CSS, la "parte desplegable" no se muestra en Internet Explorer 10 (y supongo que tampoco en los de antes) y al no tener mucha idea de CSS no sé qué estoy haciendo mal y creo que estoy guarreando el CSS más de lo que debería.
El menú funciona correctamente en Firefox y Chrome. He validado el CSS en W3C y me dice que todo es correcto.
EL html del menú sería algo así:
Código HTML:
<div id="navigation">
<ul class="navigation">
<li>
<a id="menu-navigation-link" href="/ejemplo">link normal</a>
</li>
<li>
<a id="menu-navigation-link" href="#">link desplegable</a>
<ul>
<li>
<a id="menu-navigation-sublink" href="/link_1">desplegable 1</a>
</li>
<li>
<a id="menu-navigation-sublink" href="/link_2">desplegable_2</a>
</li>
</ul>
</li>
</ul>
</div>
Y el CSS sería algo así:
Código:
#navigation {
padding-top: 1.25em;
}
#navigation ul {
padding:2px 0px 2px 0px;
list-style-type: none;
background-color: #F2EAD0;
border: 1px solid #ccc;
border-width: 1px 0 1px 0;
text-align: center;
}
#navigation li {
position: relative;
display: inline;
text-align: center;
margin: 0 10px 0 0;
}
#navigation li a {
padding: 2px 7px 2px 7px;
color: #004730;
text-decoration: none;
}
#navigation li a:hover{
background-color: #004730;
color: #ffffff;
}
#navigation li ul {
position:absolute;
left:-70%;
top: 115%;
display:none;
margin: 0;
padding: 0;
width: 150px;
z-index: 100001;
}
#navigation li:hover ul {
display: block;
}
#navigation li ul li {
display: block !important;
margin: 0px;
}
#navigation li ul li a {
padding: 0;
font-style:normal;
font-family:arial;
font-weight: normal;
}
Me estoy volviendo un poco loco ¿Alguna idea? Gracias por anticipado!