Foros del Web » Creando para Internet » CSS »

Problema menú desplegable css

Estas en el tema de Problema menú desplegable css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/12/2010, 14:50
 
Fecha de Ingreso: mayo-2009
Mensajes: 18
Antigüedad: 8 años, 6 meses
Puntos: 0
Problema menú desplegable css

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
  #2 (permalink)  
Antiguo 17/12/2010, 18:41
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema menú desplegable css

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
  #3 (permalink)  
Antiguo 18/12/2010, 03:02
 
Fecha de Ingreso: mayo-2009
Mensajes: 18
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema menú desplegable css

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

Etiquetas: desplegable
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 02:28.