Hola gente, estoy intentando que un menú desplegable que he creado con listas (ul y li) se vea exactamente igual en Mozilla y en Explorer, pero no hay forma.
El tema es que el
Submenú de uno de los principales items del menú principal por defecto quiero que esté en display:none , pero cuando cargo la página en local con IE8 sale el submenú (es como si no hiciera caso al display:none).
El
css que tengo es este:
Código:
ul.menuTop{
padding: 0;
margin: 0;
list-style: none;
z-index:1;
list-style:none;
}
ul.menuTop li {list-style:none; display:inline; float:left }
/* Solo para los ul debajo de los li de primer nivel. */
ul.menuTop > li > ul
{
border:#009900 0px solid;
position:absolute;
display:none;
list-style:none;
z-index:2;
color:#FFFFFF;
text-align:center;
}
/* afecta a todas las ul que están por debajo de un elemento li */
ul.menuTop li:hover > ul
{
display:block; /* lo convierte en un elemento de bloque */
}
//Estas son las ids de los sumbenus que tiene que estar ocultos por defecto
#pag1 {margin:-1px 0 0 -38px;*margin:1px 0 0 18px;width:110px; z-index:2}
#pag2{margin:-1px 0 0 -28px;*margin:1px 0 0 18px;width:110px; z-index:2}
Y el
html
Código:
<ul class="menuTop">
<li><a href="pag1.htm" onMouseOver="turnOn('image5')" onMouseOut="turnOff('image5')" target="Principal">
<img src="Imagenes/Vtrr.gif" alt="En" name="image5" border="0" boder="0"></a>
<ul id="pag1">
<li ><a href="pag1.htm" ><img src="Imagenes/Subn.gif" alt="noticias" border="0"/></a>
</li>
</ul>
</li>
<li><A href="pag2.htm" onMouseOver="turnOn('image6')" onMouseOut="turnOff('image6')" target="Principal"><img src="Imagenes//Cfddd.gif" alt="Colaboraciones" border="0" boder="0"></a>
<ul id="pag2">
<li ><a href="pag2.htm"><img src="Imagenes/Submfd.gif" alt="noticias" border="0"/></a></li>
</ul>
</li>
</ul>
Gracias de antemano