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>
Código:
Me estoy volviendo un poco loco ¿Alguna idea? Gracias por anticipado! #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; }