Menu déroulant Css Marche sous IE 7 Pas IE 6

Bonjour,

J'ai réalisé un menu déroulant en css qui fonctionne parfaitement sous Safari , FF , IE7 et 8 , mais pas sous IE 6.

Voici le code Html et Css :

div#menu2 a {color:#ffffff; font-family:arial; font-size:75%;}

div#menu2 ul {padding: 0; margin:0px; background: #b6c0c5;}
div#menu2 li:hover {background: #707f86;}
div#menu2 li.sousmenu2:hover {background: #707f86;}
div#menu2 li.sousmenu22:{width:130px;height:23px; }
div#menu2 li.sousmenu222:{width:150px;height:30px; }
div#menu2 li.sousmenu23:{width:130px;height:23px; }
div#menu2 li.sousmenu24:{width:130px;height:23px;}
div#menu2 li.sousmenu25:{width:80px;height:23px; }
div#menu2 li.sousmenu26:{width:140px;height:23px;}
div#menu2 ul li {position:relative; list-style-type: none; float:left;}

div#menu2 ul ul {position: absolute;display:none; width:174px}

div#menu2 li.sousmenu1 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:89px;height:20px;}
div#menu2 li.sousmenu2 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:86px;height:20px;}
div#menu2 li.sousmenu3 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:149px;height:20px;}
div#menu2 li.sousmenu4 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:79px;height:20px;}
div#menu2 li.sousmenu5 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:109px;height:20px;}
div#menu2 li.sousmenu6 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:72px;height:20px;}
div#menu2 li.sousmenu7 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:63px;height:20px;}
div#menu2 li.sousmenu8 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:96px;height:20px;}
div#menu2 li.sousmenu9 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:81px;height:20px;}
div#menu2 li.sousmenu10 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:173px;height:20px;}
div#menu2 li.sousmenu11 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:140px;height:20px;}
div#menu2 li.sousmenu12 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:90px;height:20px;}

div#menu2 li.sousmenu23 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:173px; font-size:75%;height:20px;}
div#menu2 li.sousmenu24 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:155px; font-size:75%;height:20px;}
div#menu2 li.sousmenu26 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:173px; font-size:75%;height:20px;}
div#menu2 li.sousmenu27 a {text-decoration: none; padding-left:1px; padding-top:3px; display:block; width:180px; font-size:75%;height:20px;}
div#menu2 li.sousmenu25 a {text-decoration: none; padding-left:1px; padding-top:2px; display:block; width:120px; font-size:75%;height:20px;}
div#menu2 li.sousmenu22 a {text-decoration: none; padding-left:1px; padding-bottom:3px; display:block; width:173px;font-size:75%;height:20px;}
div#menu2 li.sousmenu222 a {text-decoration: none; padding-left:1px;padding-top:8px; display:block; width:173px; font-size:75%;height:20px; }
div#menu2 li.sousmenu2222 a {text-decoration: none; padding-left:1px;padding-top:8px; display:block; width:180px; font-size:75%;height:20px; }

div#menu2 ul.niveau12 li.sousmenu1:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu1:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu2:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu2:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu3:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu3:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu4:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu4:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu5:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu5:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu6:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu6:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu7:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu7:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu8:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu8:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu9:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu9:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu10:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu10:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu11:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu11:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu12:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu12:hover ul.niveau32 {display:block;}


div#menu2 ul.niveau12 li.sousmenu23:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu22:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu24:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu22:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu25:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu22:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu26:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu22:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu24:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu222:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu25:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu222:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu26:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu222:hover ul.niveau32 {display:block;}

div#menu2 ul.niveau12 li.sousmenu27:hover ul.niveau22,
div#menu2 ul.niveau22 li.sousmenu222:hover ul.niveau32 {display:block;}

Html :

<div id='menu2'>
<ul class='niveau12'>
<li class='sousmenu1'><a href='#'><center>> Habitation</center></a>
<ul class='niveau22'>
";
while($liste=mysql_fetch_array($req1)){
$requete2='SELECT num_fiche FROM fiche WHERE num_ss_menu="'.$liste[1].'"';
$resultat2=mysql_query($requete2)or die('requete url =>'.$requete2.'<br> error ->'.mysql_error());
$fiche2=mysql_fetch_array($resultat2);
echo "<li class='sousmenu22'><a href='index.php?fiche=".$fiche2[0]."&id=1'> <img src='image/puce.png' border=0></img> ".$liste[0]."</a></li>";
};

echo "
</ul>
</li>
</ul>

A savoir que le menu est généré automatiquement en PHP. Je sais que IE 6 ne respecte les hover que sur les <a> mais je ne parviens pas à modifier mon css en conséquence.

Merci d'avance pour votre aide.

Cordialement.

Acarnan ^^