Problema con capas (z-index)

[gorkreg]

Me ha surgido un problema al que no encuentro solución por ningún lado. Solo espero que la tenga. A ver si me podéis ayudar.

Tengo una web con un menú desplegable (usando exclusivamente CSS) y un "banner" donde hay un enlace a una dirección email. Para que el "banner" no me cubra el desplegable y quede en una capa inferior, le he dado un z-index de "-1". Al desplegable, un z-index de "1". Para que el menú desplegable desaparezca de la pantalla (y aparezca solo al posicionarse sobre un elemento del menú principal), lo he posicionado absolutamente y le he dado un margen negativo de -1000 cm.

Lo que sucede es que el menú desplegable, aunque no aparezca, siempre está por encima del "banner" con lo que el enlace a la dirección de email no funciona, no se puede clickar en él pues está tapado por el desplegable (aunque el texto del enlace en sí, aparezca. La dirección de correo).

Os incluyo el código por si puede servir de ayuda:

MENÚ DESPLEGABLE:

#main_nav li ul {
position: absolute;
margin-top: 0px;
width: 250px;
left: -1000cm;
z-index: 1;
}
#main_nav li ul a {
width: 250px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #292929;
}
#main_nav li:hover ul {
left: auto;
}

BANNER:

#contact {
background-image: url(../img/backgrounds/b_contact.jpg);
background-repeat: repeat-x;
background-position: left top;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
height: 150px;
line-height: 140%;
position: relative;
z-index: -1;
}

No creo que tenga importancia pero el "banner" se despliega verticalmente (efecto acordeón) mediante un código javascript.

Gracias de antemano.

[DragonX]

No creo que tenga importancia pero el "banner" se despliega verticalmente (efecto acordeón) mediante un código javascript.

y yo creo que tal vez si, ya que seguramente en ese código hay algo que indica la profundidad del banner. Todos los banner con ese efecto que ví siempre, siempre pasan por encima del contenido de la pagina. Yo que vos preguntaría también en el foro de Javascript

[Mikmoro]

Bueno, no sé cómo lo estarás haciendo tú. Mira este ejemplo a ver si te sirve de orientación.

[gorkreg]

Gracias Mikmoro. El problema no lo tengo con el menú desplegable, que funciona perfectamente (puedes ver el código que uso más arriba). La cosa se complica pues tengo un banner y el menú desplegable que tiene aparecer por encima del banner (dos capas distintas). Este desplegable tapa al banner y, en consecuencia, también al ancla que tengo en ese banner. No se si me explico.

En este otro post está el código javascript que estoy usando para que el banner se abra con ese efecto acordeón:
http://www.forosdelweb.com/f13/probl...-capas-685276/

[gorkreg]

¡Ah! Acabo de darme cuenta de lo que quieres decir. Estaba viendo el ejemplo a 1200x1024 y la caja con el enlace quedaba a un lado del menú no debajo. Ahora a 1024x768 queda debajo.

Me pongo a investigarlo.
Gracias.

[gorkreg]

Pues ya está solucionado. Tan simple como eliminar la posición relativa del banner. Ahora ni siquiera necesito los z-index para que el menú desplegable aparezca por encima.

Gracias a todos.

[Mikmoro]

Como habrás visto, mi ejemplo no usa z-index (ni posición relativa en la caja (banner en tu caso).

Saludos.

[Flora]

Pues yo tengo el mismo problema y no se me soluciona quitando la posicion relativa ni el zindex al div que tiene los enlaces que no me funcionan.

alguna otra posible solución?

Gracias

[gorkreg]

Pon el código relevante o un enlace a la web a ver si te puedo ayudar.

[Flora]

Este es el css de los enlaces que no me funcionan por culpa del zindex del menu que los tapa:

#regitro_idioma_buscador{
width:490px;
height:35px;
position:relative;
float:right;
z-index:400;
margin:63px 10px 0px 0px;
text-align:right;
z-index:1;
}
#registro_idioma{
width:280px;
height:35px;
float:left;
text-align:right;
margin:0px 0px 0px 0px;
}
#registro_idioma p{
width:140px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333;
margin:0;
padding:0px 0px 0px 150px;
text-align:right;
}
#registro_idioma p a{
width:140px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333;
text-decoration:none;
}

Si aumento el z index de #regitro_idioma_buscador funcionan los enlaces, pero entonces el desplegable del menú no aparece por encima.

Se te ocurre alguna posible solución?

Muchas gracias:)