ayuda con menu vertical

Jamati · #1 (**permalink**) 02/04/2008, 11:51

Alguien me podria decir que pasa en Internet Explorer que el submenu queda escondido por detrás ??

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>

Jamati · #2 (**permalink**) 03/04/2008, 14:35

nadie sabe ?... este maldito explorer me está poniendo nervioso......

si alguien tiene alguna sugerencia será bienvenida, fijensé, prueben el codigo en Explorer 6 y verán como queda por detrás el submenu.

Gracias de ante mano y saludos.

Mikmoro · #3 (**permalink**) 03/04/2008, 15:21

El asunto es la posición relativa de los "li" de primer nivel. Al ser los "ul" hijos suyos y estar en posición absoluta, en explorer no se puede conseguir que salgan por encima de sus "tios" (los otros li).

Deberás quitar la posición relativa de "ul.menu li"
Entonces los deplazamientos top y left de "ul.menu li ul" no te servirán, y tendrás que convertirlos en margin-top y margin-left y ajustarlos (p.e. margin-top: -2px;
margin-left: -20px;).

De esta manera conseguirás que se superpongan a los otros li. Prueba este codigo:

Cita:

Puede que ahora alguna cosa cambie, pero supongo que averiguarás cómo resolverlo.

Ya contarás.

Mikel.

Jamati · #4 (**permalink**) 04/04/2008, 22:37

Oye Mikmoro, no te das una idea lo mucho que me has ayudado. Sinceramente mil gracias, funcionó perfecto lo que me dijiste. Podría estar meses buscando este problema y creo que jamás lo iba a poder solucionar.

Estuvo de más quizás el tema de los margin-top y margin-left porque sin usar eso funciona perfecto (obviamente haciendo lo que me dijiste).

Saludos y mil gracias por todo.