Hola,
Tengo este menú en HTML:
Código HTML:
<li class="activo"><a href="../productos.html">Productos</a>
<ul>
<li><a href="prod1.html">Nombre producto</a></li>
<li><a href="prod2.html">Nombre producto</a></li>
<li><a href="prod3.html">Nombre producto</a></li>
<li><a href="prod4.html">Nombre producto</a></li>
<li><a href="prod5.html">Nombre producto</a>
<ul class="cosmetica">
<li><a href="prod5a.html">Nombre producto</a></li>
<li><a href="prod5b.html">Nombre producto</a></li>
<li><a href="prod5c.html">PNombre producto</a></li>
</ul>
</li>
<li><a href="varios.html">Otros productos</a></li>
</ul></li>
Que funciona como menú desplegable con el siguiente CSS:
Código:
#menu ul li{
display: block;
float: left;
padding: 3px 31px 0 31px;
border-right: 1px solid #96ccff;
height: 21px;
border-bottom: 1px solid #96ccff;
background: url(../img/menu_bkg.jpg) repeat-x;
letter-spacing: 1px;
position: relative;
}
#menu ul li a{
text-decoration: none;
font-weight: bold;
color: #1f2c66;
display: block;
position: relative;
}
#menu ul li a:hover{
color: #777777;
}
#menu ul li.activo{
background: url(../img/menu_sel_bkg.jpg);
color: #777777;
font-weight: bold;
text-decoration: none;
display: block;
position: relative;
}
#menu ul li.activo a{
color: #777777;
}
/*--------------------------------------------------Submenu1-------------------------------------*/
#menu ul li ul{
background-image: none;
float: left;
text-align: center;
margin-top: 8px;
margin-left: -22px;
display: none;
border-bottom: none;
z-index:2;
position:relative;
}
#menu ul li:hover{
position: relative;
}
#menu ul li a:hover ul, #menu ul li:hover ul{
display: block;
position: absolute;
left: 0px;
}
#menu ul li ul li{
height: 18px;
display: block;
float: left;
background: url(../img/submenu_bkg.jpg) repeat-x left;
border: 1px solid #DFDFDF;
margin-left: -1px;
width: 132px;
font: bold 11px Arial, Helvetica, sans-serif;
padding: 8px 15px 0 15px;
}
#menu ul li ul li a, #menu ul li.activo ul li a {
text-decoration: none;
color: #000000;
font: bold 11px Arial, Helvetica, sans-serif;
}
#menu ul li ul li a.select, #menu ul li.activo ul li a.select {
width: 200px;
padding: 6px 0px 8px 0px;
background: url(../img/submenu_sel_bkg.jpg) repeat-x left;
}
#menu ul li ul li a:hover{
font-weight: bold;
}
#menu ul li ul li:hover{
background: url(../img/submenu_sel_bkg.jpg) repeat-x left;
position: relative;
}
Y el cliente me dice que el menú desplegable de "Productos" no se ve en IE6 y en un IE7 tampoco, aunque normalmente funciona a la perfección en IE7.
¿Alguien sabe qué puede pasar o como solucionarlo?