Buenas, tengo un menú emergente hecho en css. Cuando pasas por encima de cada opción, la imagen de fondo cambia.
Bien, en firefox cambia al instante, pero en IE antes de cambiar, se muestra el color de fondo, negro en mi caso, y queda bastante mal ya que antes de cambiar la imagen se ve el color negro durante medio segundo quizás y no es ese el efecto que busco.
Dejo el código aquí:
Código HTML:
/* menu */
.menusup {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(url/media/images/menu/fondo.gif); position:relative; border-bottom:1px solid #444;}
.menusup li {float:left;}
.menusup li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menusup li a b {float:left; display:block; padding:0 16px 0 8px;color:#aaa;}
.menusup li a:hover {color:#fff; background:#000 url(url/media/images/menu/cambio.gif);text-decoration:none;}
.menusup li a:hover b {color:#fff;background:url(url/media/images/menu/cambio.gif) no-repeat right top;text-decoration:none;}
#menu-categorias{
/*background:#8F9090 url('url/media/images/menu/menu_categorias.gif') repeat-x;*/
margin:0;
margin-top:-2px;
padding:0;
list-style:none;
border:1px solid #181A1C;
}
#menu-categorias a{
background:#3A3C3D;
font-weight:bold;
width:150px;
text-align:center;
color:#aaa;
padding:5px;
display:block;
border-bottom:1px solid #aaa;
}
#menu-categorias a:hover{
background:#C98C2A;
color:#fff;
text-decoration:none;
}
El color que aparece imagino que es el ".
menusup li a:hover {color:#fff;", pero si lo quito, la imagen de fondo tarda en salir también...
Si alguien ve donde puede estar el error se agradecerá enormemente
Un saludo.