Foros del Web » Creando para Internet » CSS »

ayuda con menu vertical

Estas en el tema de ayuda con menu vertical en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 02/04/2008, 12:51
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
ayuda con menu vertical

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> 
  #2 (permalink)  
Antiguo 03/04/2008, 15:35
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: ayuda con menu vertical

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.
  #3 (permalink)  
Antiguo 03/04/2008, 16:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: ayuda con menu vertical

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:
<style type="text/css">
ul.menu {width:100px;background:#CC0000;}
ul.menu li {float:left;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;margin-top:-2px;margin-left:-20px;z-index:1;}
ul.menu li ul li {border:0;clear: left;}
</style>
Puede que ahora alguna cosa cambie, pero supongo que averiguarás cómo resolverlo.

Ya contarás.

Mikel.
  #4 (permalink)  
Antiguo 04/04/2008, 23:37
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: ayuda con menu vertical

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:08.