Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/03/2008, 14:31
Jamati
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 1 mes
Puntos: 3
Solapamiento de listas en menú vertical

Hola gente:

Tengo un problema y no se coo solucionarlo. Este es el codigo:

Código HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

ul.menu {width:100px;background:#CC0000;}
ul.menu li {float:left;position:relative;border:1px solid #000000;background:#E5E5E5;list-style:none;}
ul.menu li a {display:block;font:bold 11px Arial,Helvetica,sans-serif;color:#000000;}
ul.menu li a:hover {background:#CCCCCC;}

ul.menu li ul {display:none;position:absolute;top:10px;left:-20px;z-index:1;}
ul.menu li ul li {border:0;}

</style>
<script language="JavaScript">
function menu(opcion,llamador){
	var recibe = llamador.getElementsByTagName('ul')[0];
 	if (opcion == 1) { recibe.style.display="block"; } else { recibe.style.display="none"; }
}
</script>
</head>
<body>
<ul class="menu">
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 1</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
    </ul>
  </li>
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 2</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
   </ul>
  </li>
</ul>
<ul class="menu">
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 1</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
    </ul>
  </li>
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 2</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
   </ul>
  </li>
</ul>
TEXTO QUE DEBERIA IR DEBAJO
TEXTO QUE DEBERIA IR DEBAJO
TEXTO QUE DEBERIA IR DEBAJO
</body>
</html> 
Resulta que si pueden observar, en FF se visualiza OK, pero en Explorer, el submenu de la segunda fila queda oculto, como que queda detrás. Ya sé que se puede poner todo en una fila y soluciono el problema, pero puse este ejemplo ya que necesito algo muy similar.

Alguien me puede ayudar para solucionar esto y que en Explorer no queda el submenu debajo de la fila ??

Comentarios:

1) En ul.menu li ul puse un {z-index:1;} y esto me hace verlo correctamente en FF, pero en IE no me hace caso.

2) Otra cosa que no puedo entender, en FF al poner float:left en ul.menu li, el texto que sigue debajo se me coloca al lado, se me borra el background rojo... todo muy raro, y no lo puedo solucionar tampoco.

Bueno, perdón por lo largo pero estoy medio desesperado.

Gracias.