Foros del Web » Creando para Internet » CSS »

Menu CSS queda oculto por el div de abajo

Estas en el tema de Menu CSS queda oculto por el div de abajo en el foro de CSS en Foros del Web. Buenas tardes!! Tengo un pequeño problema... He realizado un menu desplegable en CSS, pero en una de las páginas se me queda oculto tras una ...
  #1 (permalink)  
Antiguo 20/02/2011, 11:45
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 6 años, 9 meses
Puntos: 0
Menu CSS queda oculto por el div de abajo

Buenas tardes!! Tengo un pequeño problema... He realizado un menu desplegable en CSS, pero en una de las páginas se me queda oculto tras una galeria de fotos que implemente con un plugin de jquery (galleyviewer).

Les dejo el código del css por si puedieran echarme una mano.

Código:
/* estilo general */
.outer{
	width:620px;
	position:aboslute;
	left:-1px;
	top:-2px;
	text-align:center;
	font-family: Tahoma, verdana, helvetica, sans-serif;
	color: #FFF;
	font-size:13px;
}


/* drop up */
ul#nav,ul#nav ul {
	margin: -1px;
	padding:4px 2px 2px 2px;
	list-style: none;
	vertical-align: middle;
	position: absolute;
	top:10px;
}
ul#nav {
	width:620px;
	height:22px;
	background:#4171b1;
	margin:1px 0;
	vertical-align: middle;
}

ul#nav li {
	position: relative;
	float: left;
	background:#4171b1;
	color:#FFF;
	text-align:left;
	margin:0px 13px;
	
}
ul#nav li a {
	text-decoration: none;
	color:#FFF;
}
#nav li ul {
	position: absolute;
	left: 0; 
	top:20px;
	margin-left:-999em;
	border:none;
	width:199px;
	background:#4171b1;
	border-right:0px solid silver;
 /*opacity for IE5+*/
  filter: alpha(opacity=90);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.9;
  /*opacity for mozilla/safari*/
  opacity: 0.9;
  	font-family: Tahoma, verdana, helvetica, sans-serif;
	font-size:12px;
}
ul#nav li li{height:auto;border:none; }
ul#nav li li a{
	color:#fff;
	padding:2px 10px 5px 0px;
	display:block;
}
ul#nav li:hover ul, 
ul#nav li.over ul {
	margin-left:0px;
}
ul#nav li:hover,
ul#nav li.over,
ul#nav li:hover a,
ul#nav li.over a {color:#000;}

ul#nav li:hover li a,ul#nav li.over li a{color:#FFF;}
ul#nav li li a:hover{color:#000;}
ul#nav li p {padding-top:0px;}
ul#nav li.last,ul#nav li.last ul{border:none;width:125px;}
Por cierto, se trata de un menú transparente, por si les sirve para algo...

Gracias por adelantado!!
  #2 (permalink)  
Antiguo 20/02/2011, 18:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Menu CSS queda oculto por el div de abajo

Hola flpe, bienvenido.

Suponiendo que .outer es la galeria de fotos y ul#nav es el menu:
Código CSS:
Ver original
  1. ul#nav{
  2. position:absolute;
  3. top:10px; left:0;
  4. z-index:2;
  5. }
  6. .outer{
  7. position:absolute;
  8. left:-1px;
  9. top:-2px;
  10. z-index:1;
  11. }

esto hará que el menu este por encima de la galeria.

Aclaración, para que funcione, tanto el menu como la galeria deben ser hermanos. ejemplo:
Código HTML:
Ver original
  1. <ul id="nav"> ... </ul>
  2. <div class="outer"> .. </div>
  3. </body>

Aquí body es el padre de #nav y .outer. siendo #nav y .outer hermanos entre sí.

Aquí puedes ver un buen ejemplo sobre el uso de z-index.

tip: z-index solo funcionará si se aplica a capas hermanas y si al mismo tiempo estas capas estan posicionadas en fixed, absolute o relative.

Espero te sea de ayuda. Un saludo.

Etiquetas: oculto
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 05:11.