Foros del Web » Creando para Internet » CSS »

Solapamiento de listas en menú vertical

Estas en el tema de Solapamiento de listas en menú vertical en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 25/03/2008, 15:31
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
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.
  #2 (permalink)  
Antiguo 26/03/2008, 22:16
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Solapamiento de listas en menú vertical

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

Ayuda por favor se los agradeceria mucho.
  #3 (permalink)  
Antiguo 02/09/2008, 19:26
Avatar de zayed_jat  
Fecha de Ingreso: mayo-2006
Mensajes: 121
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Solapamiento de listas en menú vertical

hmm la verdad que se ve mal
pero yo estoy peor que vos en marzo
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 03:12.