Hola,
tengo una página con tres capas: un menú superior, uno lateral y una sección de contenidos.
El menú superior es una lista de dos niveles, con css simulo un menú de navegación desplegable.
El problema que tengo es que con Firefox se despliegan las opciones del menú superior, pero no puedo seleccionarlas. Es decir, al pasar el cursor por las opciones de primer nivel de la lista, se despliegan las de segundo nivel, hasta ahí todo bien, pero cuando quiero llevar el cursor hacia una de las opciones del segudo nivel, éstas desparecen. Lo extaño es que no sucede lo mismo con IE.
Cualquier ayuda que puedan brindarme será bien recibida,
desde ya, muchas gracias.
Este es el código que estoy usando:
<div id="mSup">
<ul id="nav">
<li>Opcion 1 <ul>
<li><a href="#">Subopcion 1</a></li>
<li><a href="#">Subopcion 2</a></li>
</ul>
</li>
<li>Opcion 2<ul>
<li><a href="#">Subopcion 1</a></li>
<li><a href="#">Subopcion 2</a></li>
</ul>
</li>
</ul>
</div>
<div id="mIzq">
<ul>
<li> Opciones<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>
<li> Mas opciones </li>
</ul>
</div>
<div id="contenido">
Muchos párrafos
</div>
CSS:
/*
Menu Superior
************************************************** *******/
div#mSup ul {
padding: 0;
margin: 0;
list-style: none;
}
div#mSup li {
float: left;
position: relative;
width: 10em;
}
div#mSup li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
div#mSup li>ul {
top: auto;
left: auto;
}
div#mSup li:hover ul, div#mSup li.over ul {
display: block;
}
/*
Menu lateral
************************************************** *******/
div#mIzq {
clear: left;
position:absolute;
top: 120px;
left:0;
width:20%;
height:inherit;
}
/*
Contenidos
************************************************** *******/
div#contenido {
clear: left;
position: absolute;
top: 120px;
left:20%;
width: 80%;
min-width:350px;
height:inherit;
}