Problema menú desplegable css

ploki · #1 (**permalink**) 17/12/2010, 14:50

Hola tengo la siguiente estructura
<body >
<div id=cabecera>
<div>Menu desplegable</div>
</div>
<div id=cuerpo />
</body>

En la cabecera tengo un menú con css que se despliega hacia abajo, pero se queda por debajo de la cabecera, es decir, si la cabecera mide 100px, en el momento en el que el menú desplegable supera los 100px, se queda debajo...he leido que usando z-index se puede, pero las pruebas que he hecho no he conseguido nada. he intentado lo siguiente:

<body>
<div id=cabecera style=z-index:0;position:relative>
<div style=z-index=1;position:relative>Menu desplegable</div>
</div>
<div id=cuerpo />
</body>

Alguna idea??

Gracias

mlombardo70 · #2 (**permalink**) 17/12/2010, 18:41

Hola, necesitaría ver como está hecho ese menú desplegable, pero así a bote pronto veo que tienes mal puesto el z-index. No es z-index=1 sino z-index:1

Por lo que quedaría:

Código HTML:

<body>
<div id=cabecera style=z-index:0;position:relative>
<div style=z-index:1;position:relative>Menu desplegable</div>
</div>
<div id=cuerpo />
</body>

Lo que hace z-index es indicar el orden de las capas. Es decir, el que tenga el valor más alto se superpondrá sobre las que tengan un valor inferior
Para probarlo sobre ese ejemplo puedes darle un background-color:red a la cabecera y un background-color:blue al div de dentro. Como el div de dentro tiene un z-index mayor se mostrará el color azul, si le aplicas un z-index mayor a la cabecera se mostrará de color rojo.

Saludos

ploki · #3 (**permalink**) 18/12/2010, 03:02

Muchas gracias por la respuesta!
Ibas bien encaminado. El problema es que en un sitio tenía position:absolute y se quedaba abajo.
Ya he solucionado esto tuve que tocar el overflow para que fuera visible, el tema es que ahora no consigo que la capa de abajo se quede parada, es decir, cuando el menú desplegable superior se abre se mueve el contenido de la capa cuerpo.
Te dejo el código y un enlace para poder ver el html
Gracias de antemano

Código:

<head>
<style type="text/css">

body {
    color: purple;
    background-color: #d8da3d }


#menu {  text-align: center;
font-size: 0.7em;


z-index:3;
}
#menu ul 
{ list-style-type: none;}
#menu ul li.nivel1 
{ float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: relative;left: 0px;
z-index:3;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
</style>

</head>
<body>
<div id='cabecera' style='z-index:0;position:relative;background-color:red;overflow:visible'>
  <div style='z-index:1;position:relative;background-color:blue;height:100px;'>Cabecera
     <div id="menu" style='position:relative;z-index: 3'>
	<ul>
	  <li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
	<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
		<ul>
			<li><a href="#">Opción 1.1</a></li>
			<li><a href="#">Opción 1.2</a></li>
		</ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	</ul>
  
      </div>
   </div>
</div>
<br/>
<div id='cuerpo' style='z-index:0;position:relative;background-color:red'>Cuerpo</div>
</body>

http://htmledit.squarefree.com/ ->La pagina donde comprobarlo.
Estoy usando FF.

Gracias