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;
}
El "banner" se despliega verticalmente (efecto acordeón) mediante un código javascript y es por eso que he movido el post hasta aquí. ¿Quizá tenga algo que ver?
Gracias de antemano.
