Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/12/2011, 05:34
chicotoy
 
Fecha de Ingreso: diciembre-2007
Mensajes: 45
Antigüedad: 16 años, 3 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>