El menu consta de 5 categorías, y una de ellas (la primera) contiene a su vez tres submenús, que sólo deben aparecer cuando se pasa por encima de ella.
El problema está en que en IE6 no logro hacer aparecer los submenús asociados a la primera categoría...
A ver si alguien puede echarme una mano!
Código XHTML:
Código HTML :
<ul id="navbar" style=" position:absolute; z-index:999;"> <li><a href="#" id="b1"></a> <ul> <li><a href="concerts.html" id="b1_1"></a></li> <li><a href="abonaments.html" id="b1_2"></a></li> <li><a href="entrades.html" id="b1_3"></a></li> </ul> </li> <li><a href="cicle_orgue.html" id="b2"></a></li> <li><a href="musica_i_musics.html" id="b3"></a></li> <li><a href="discant.html" id="b4"></a></li> <li><a href="interprets.html" id="b5"></a></li> </ul>
Código CSS
Código HTML :
/* CONFIGURACIÓN DEL MENÚ */
#navbar {
position: relative;
width: 663px;
z-index:999;
top:120px;
left:-20px;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
}
#navbar li ul {
display: none;
}
#navbar li:hover ul{
position: absolute;
display: inline;
width: 100%;
margin: 0;
padding: 0;
margin-top:1px;
}
/* ESTILO Y ROLLOVER DE LOS MENÚS */
a#b1{
background:url(../img/b1_0.gif);
width:175px;
height:26px;
background-repeat:no-repeat;
}
a#b1:hover{
background:url(../img/b1_1.gif);
width:175px;
height:26px;
background-repeat:no-repeat;
}
a#b2{
background:url(../img/b2_0.gif);
width:113px;
height:26px;
background-repeat:no-repeat;
}
a#b2:hover{
background:url(../img/b2_1.gif);
width:113px;
height:26px;
background-repeat:no-repeat;
}
a#b3{
background:url(../img/b3_0.gif);
width:121px;
height:26px;
background-repeat:no-repeat;
}
a#b3:hover{
background:url(../img/b3_1.gif);
width:121px;
height:26px;
background-repeat:no-repeat;
}
a#b4{
background:url(../img/b4_0.gif);
width:77px;
height:44px;
background-repeat:no-repeat;
margin-top:-18px;
}
a#b4:hover{
background:url(../img/b4_1.gif);
width:77px;
height:44px;
margin-top:-18px;
background-repeat:no-repeat;
}
a#b5{
background:url(../img/b5_0.gif);
width:143px;
height:26px;
background-repeat:no-repeat;
margin-left:-4px;
}
a#b5:hover{
background:url(../img/b5_1.gif);
width:143px;
height:26px;
background-repeat:no-repeat;
margin-left:-4px;
}
a#b1_1{
background:url(../img/b_1_1_0.gif);
width:72px;
height:15px;
background-repeat:no-repeat;
margin-left:0px;
margin-top:-1px;
}
a#b1_1:hover{
background:url(../img/b_1_1_1.gif);
width:72px;
height:15px;
background-repeat:no-repeat;
margin-top:-1px;
margin-left:0px;
}
a#b1_2{
background:url(../img/b1_2_0.gif);
width:89px;
height:15px;
background-repeat:no-repeat;
margin-left:0px;
margin-top:-1px;
}
a#b1_2:hover{
background:url(../img/b1_2_1.gif);
width:89px;
height:15px;
background-repeat:no-repeat;
margin-left:0px;
margin-top:-1px;
}
a#b1_3{
background:url(../img/b_1_3_0.gif);
width:68px;
height:15px;
background-repeat:no-repeat;
margin-left:0px;
margin-top:-1px;
}
a#b1_3:hover{
background:url(../img/b_1_3_1.gif);
width:68px;
height:15px;
background-repeat:no-repeat;
margin-left:0px;
margin-top:-1px;
}
PD: se que el código esta un poco "sucio", pero es que he echo tantas pruebas para intentar solucionar el problema que ya no sé ni que hago... jeje
Muchas gracias!
