Solapamiento de listas en menú vertical

Jamati · #1 (**permalink**) 25/03/2008, 14:31

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.

Jamati · #2 (**permalink**) 26/03/2008, 21:16

alguien probó el codigo que puse ??
no puedo entender porque el IE lo ve mal.

Ayuda por favor se los agradeceria mucho.

zayed_jat · #3 (**permalink**) 02/09/2008, 18:26

hmm la verdad que se ve mal
pero yo estoy peor que vos en marzo