Foros del Web » Creando para Internet » CSS »

Menú desplegable con imágenes no funciona en ie8

Estas en el tema de Menú desplegable con imágenes no funciona en ie8 en el foro de CSS en Foros del Web. He tuneado un menú css desplegable y con imágenes y funciona perfectamente en firefox pero en explorer solo se muestra el rollover, os pongo el ...
  #1 (permalink)  
Antiguo 29/12/2011, 05:34
 
Fecha de Ingreso: diciembre-2007
Mensajes: 45
Antigüedad: 16 años, 10 meses
Puntos: 0
Menú desplegable con imágenes no funciona en ie8

He tuneado un menú css desplegable y con imágenes y funciona perfectamente en firefox pero en explorer solo se muestra el rollover, os pongo el código por si veis el fallo en el navegador ie8

#nav {padding:0; margin:0; list-style:none; height:50px; position:relative; z-index:200; font-family:arial, verdana, sans-serif; width:916px;}
#nav li.top {display:block; float:left;}
#nav li a {display:block; float:left; height:18px; width:136px; border:0px; text-decoration:none; padding:0; cursor:pointer;}
#nav li a.inicio {background:url(1.png);}
#nav li a.servicios {background:url(2.png);}
#nav li a.galeria {background:url(3.png);}
#nav li a.videos {background:url(4.png);}
#nav li a.clubhurtan {background:url(5.png);}
#nav li a.contacto {background:url(6.png);}
#nav a:hover {background-position: 0 0px;}
#nav table {position:absolute; top:0; left:0; border-collapse:collapse; padding:0; width:0; height:0; margin:-1px;}
#nav .sub {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}
#nav :hover ul.sub {left:0; top:19px; width:136px; height:auto; z-index:300;}
#nav :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:136px; font-weight:normal;}
#nav :hover ul.sub li a {display:block; height:19px; width:136px; border:0px; text-decoration:none; padding:0; cursor:pointer;}
#nav :hover ul.sub li a b {position:absolute; margin:0;}
#nav :hover ul li a.p21 {background:url(21.png);}
#nav :hover ul li a.p22 {background:url(22.png);}
#nav :hover ul li a.p23 {background:url(23.png);}
#nav :hover ul li a.p24 {background:url(24.png);}
#nav :hover ul li a.p25 {background:url(25.png);}
#nav :hover ul li a.p51 {background:url(51.png);}
#nav :hover ul li a.p52 {background:url(52.png);}
#nav :hover ul li a.p61 {background:url(61.png);}
#nav :hover ul li a.p62 {background:url(62.png);}

#nav :hover ul.sub li a:hover {background-position: 0 0px; position:relative;}


=========





<ul id="nav">
<li class="top"><a href="http://www.google.es" class="uno"><b></b></a>

</li>
<li class="top"><a href="http://www.google.es" class="dos"><b></b></a>
<ul class="sub">
<li><a href="http://www.google.es" class="p21"><b></b></a></li>
<li><a href="http://www.google.es" class="p22"><b></b></a></li>
<li><a href="http://www.google.es" class="p23"><b></b></a></li>
<li><a href="http://www.google.es" class="p24"><b></b></a></li>
<li><a href="http://www.google.es" class="p25"><b></b></a></li>
</ul>
</li>
<li class="top"><a href="http://www.google.es" class="tres"><b></b></a>
</li>

<li class="top"><a href="http://www.google.es" class="cuatro"><b></b></a>

</li>
<li class="top"><a href="http://www.google.es" class="cinco"><b></b></a>

<ul class="sub">
<li><a href="http://www.google.es" class="p51"><b></b></a></li>
<li><a href="http://www.google.es" class="p52"><b></b></a></li>

</ul></li>
<li class="top"><a href="http://www.google.es" class="seis"><b></b></a>
<ul class="sub">
<li><a href="http://www.google.es" class="p61"><b></b></a></li>
<li><a href="http://www.google.es" class="p62"><b></b></a></li>

</ul>
</li>
</ul>

Etiquetas: desplegable, explorer, firefox, hover, ie8, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:11.