Menu CSS queda oculto por el div de abajo

flpe · #1 (**permalink**) 20/02/2011, 11:45

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!!

cristian_cena · #2 (**permalink**) 20/02/2011, 18:48

Hola flpe, bienvenido.

Suponiendo que .outer es la galeria de fotos y ul#nav es el menu:

Código CSS:

Ver originalul#nav{
position:absolute;
top:10px; left:0; 
z-index:2;
}
.outer{
position:absolute;
left:-1px;
top:-2px;
z-index:1;
}

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<body>
<ul id="nav"> ... </ul>
<div class="outer"> .. </div>
</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.