Problema IE6 con menú desplegable

[Wing]

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?