Buenas, ando aquí peleando con diseño basado en capas y css, creando un menú desplegable.
Mi problema solo se produce en Explorer, bueno he probado con Opera y Firefox y se ve correctamente.
La capa que ha de salir al pasar el ratón sale en vez de por encima, tiene z-index:100, sale debajo y desplaza todo hacia abajo.
El efecto lo podéis ver en http://www.netbur.com/clientes/alendoy
Os pego el código de la barra de enlaces:
#barra_menu{
z-index:100;
margin: 0px;
padding:0px;
background:url(../img/fondo_menu.gif) repeat-x;
height:31px;
voice-family: "\"}\"";
voice-family:inherit;
height:31px;
}
#barra_menu a{
width:150px;
height:30px;
display:block;
margin:0px;
text-indent:3.5em;
padding-top:8px;
padding-bottom:0px;
text-decoration:none;
color:#FFF;
}
#barra_menu a:hover{
background:url(../img/boton_menu_over.gif) no-repeat;
width:150px;
height:30px;
display:block;
color:#369;
}
#barra_menu a span {
display: none;
}
#barra_menu a:hover span {
z-index:100;
display:block;
height:20px;
padding:0px;
margin-top:8px;
color: #FFF;
background:url(../img/fondo_submenu.gif) repeat-X;
font: 10px Verdana, sans-serif;
text-align: center;
}
---à HTML
<div id="barra_menu">
<ul id="barra_menu">
<li><a href="htm/tarjetas-plasticas-contacto.htm">Contacte</a></li>
<li><a href="#">Controles de Acceso</a></li>
<li><a href="#"> Impresoras Tarjetas</a></li>
<li><a href="#">Tarjetas Plásticas<span>Acceso 1 | Acceso 2</span></a></li>
</ul>
</div>
Gracias por leer esto.
Rubén
