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!