Hola, pues el problema es que he hecho un menu desplegable con css. Se despliega y se ve perfectamente, pero cuando paso el boton por encima desaparece la imagen del boton, es decir, solo me muestra la imagen en reposo del boton, la imagen de cuando el raton esta sobre el no la muestra. Si presiono el boton si que me aparece la imagen de presionado. A ver si me podeis echar una mano. Gracias.
Este es el codigo HTML:
<div id="wrap">
<ul id="bigbuttons">
<li style="float:left;" class="inicio"><a href="Copia de default.html"></a></li>
<li style="float:left;" class="inicio"><a href="Copia de default.html"></a>
<ul style="list-style-type:none;">
<li class="inicio"><a href="Copia de default.html"></a></li>
<li class="inicio"><a href="Copia de default.html"></a></li>
</ul>
</li>
</ul>
</div>
Y este es el codigo del CSS:
#wrap {
width: 800px;
position:relative;
z-index:1;
margin-top:3px;
}
#wrap ul {
margin:0;
padding:0 0% 0 0;
}
#wrap li {
display:inline;
list-style:none;
padding:0 0em 0 0;
}
#bigbuttons {
display:inline;
style="list-style-type:none;"
width: 800px;
}
.inicio {
background-image: url(../images/boton1sobre.png);
background-repeat: no-repeat;
height: 38px;
width: 176px;
}
.inicio a{
background-image: url(../images/boton1reposo.png);
background-repeat: no-repeat;
height:38px;
width: 176px;
display: block;
}
.inicio a:hover{
background: none;
}
.inicio a:active{
background-image: url(../images/boton1presionado.png);
}
ul#bigbuttons li ul{
position:absolute;
margin:0;
padding-left:0;
display:none;
list-style:none;
}
ul#bigbuttons li:hover ul{
display:block;
}
ul#bigbuttons li:hover ul{
margin:0;
}