Menu de Listas en IE6

[bernattorras]

Hola, he hecho un menu basado en listas y CSS que funciona correctamente en la mayoría de navegadores pero (sorpresa) no me acaba de funcionar correctamente en IE6...

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;">

		  <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:

#navbar {
	position: relative;
	width: 663px;
	z-index:999;
	top:120px;
	left:-20px;	
}
	
#navbar li {
	list-style: none;
	float: left;
}
	
#navbar li a {
	display: block;
	text-transform: uppercase;
	text-decoration: none; 
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:12px;
	color: #FFFFFF; 
}
	
#navbar li a:hover {
	
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:12px;
	color: #000000; 
}
	
#navbar li ul {
	display: none; 
}
	
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top:1px;
}
	
#navbar li:hover li, #navbar li.hover li {
	float: left;
	margin-top:0px;
}
	
#navbar li:hover li a, #navbar li.hover li a {
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:10px;
	color: #FFFFFF; 
}
	
#navbar li li a:hover {
	color: #000000;
}

#b1{
	background:url(../img/b1_0.gif);
	width:175px;
	height:26px;
	background-repeat:no-repeat;
}
#b1:hover{
	background:url(../img/b1_1.gif);
	width:175px;
	height:26px;
	background-repeat:no-repeat;
}
#b2{
	background:url(../img/b2_0.gif);
	width:113px;
	height:26px;
	background-repeat:no-repeat;
}
#b2:hover{
	background:url(../img/b2_1.gif);
	width:113px;
	height:26px;
	background-repeat:no-repeat;
}
#b3{
	background:url(../img/b3_0.gif);
	width:121px;
	height:26px;
	background-repeat:no-repeat;
}
#b3:hover{
	background:url(../img/b3_1.gif);
	width:121px;
	height:26px;
	background-repeat:no-repeat;
}
#b4{
	background:url(../img/b4_0.gif);
	width:77px;
	height:44px;
	background-repeat:no-repeat;
	margin-top:-18px;
}
#b4:hover{
	background:url(../img/b4_1.gif);
	width:77px;
	height:44px;
	margin-top:-18px;
	background-repeat:no-repeat;
}
#b5{
	background:url(../img/b5_0.gif);
	width:143px;
	height:26px;
	background-repeat:no-repeat;
	margin-left:-4px;
}
#b5:hover{
	background:url(../img/b5_1.gif);
	width:143px;
	height:26px;
	background-repeat:no-repeat;
	margin-left:-4px;
}

#b1_1{
	background:url(../img/b_1_1_0.gif);
	width:72px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#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;
}

#b1_2{
	background:url(../img/b1_2_0.gif);
	width:89px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#b1_2:hover{
	background:url(../img/b1_2_1.gif);
	width:89px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}

#b1_3{
	background:url(../img/b_1_3_0.gif);
	width:68px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#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!

[hades87]

el problema que veo yo es que le aplicas el hover encima del li, cuando se lo tendrías que aplicar encima de a, ya que IE6 soloa cepta dichas propiedades encima de las etiquetas a y las demás las ignora

[Mikmoro]

Aquí tienes unos cuantos menús sólo con CSS que funcinan en IE6. Mira a ver si te sirven para ver cómo está hecho para que funcione.

[bernattorras]

Gracias por vuestras respuestas...

hades87, estoy intentando cambiar el CSS para hacer referencia al :hover del link y no del <li> pero parece que no lo consigo...

El código que se ocupa del :hover és:

Código HTML:

#navbar li ul {
	display: none; 
}
	
#navbar li:hover ul{
	position: absolute;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top:1px;
}

y la estructura del HTML és:

Código:

<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>

Supongo que haciendo referencia al #b1 en vez del <li> (solo #b1 tiene desplegable) deberia funcionar no?

Lo intento con

Código:

#navbar li a#b1:hover ul{...}

, pero no parece funcionar...

Alguien puede ayudarme?

Muchisimas gracias!!

[hades87]

el hover los has de aplicar a a, tal que quede así:

a:hover, solamente con a te lo aceptará IE6, de cualquier otra forma no

[Mikmoro]

No podría funcionar con esto:

#navbar li a#b1:hover ul{...}

porque sencillamente el UL no está dentro del enlace, sino fuera de él.

<a href="#" id="b1"></a>
<ul>