Probleme menu CSS avec IE7

[fredtahir]

Bonjour à tous,

Je cherche en vain depuis hier l'origine de mon problème de menu en CSS.

Je cherche à faire un menu déroulant horizontal avec un seul sous-menu.

En IE8 et Firefox tout fonctionne superbement. En IE7, mon sous-menu s'ouvre quelques centimètres à droite de l'élément de menu sur lequel on clique. En IE8, le sous-menu s'ouvre bien à la verticale de l'élément cliqué.

Voici mon code CSS :

div#menu a {color:#FFFFFF}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center; font-size: small; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
div#menu li {background:#769223; width:121px; padding: 4px 0px 4px; display:block; text-decoration: none;}
div#menu li:hover {background: #99CC00}
div#menu li.sousmenu:hover {background: #769223;}
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid; border-color:#FFFFFF}
div#menu ul ul {position:absolute; display:none;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}
div#menu li a {text-decoration: none;}

et voici mon code HTML :

<div id="menu" style="margin-left:0px;">
<ul class="niveau1">
<li><a href="be_index.php">Accueil</a></li>
<li class="sousmenu">Présentation
<ul class="niveau2">
<li><a href="be_societe.php">Société</a></li>
<li><a href="be_pointsforts.php">Points forts</a></li>
<li><a href="be_savoirfaire.php">Savoir faire</a></li>
</ul>
</li>
<li class="sousmenu">Vérandas
<ul class="niveau2">
<li><a href="be_veranda.php">Modèles</a></li>
<li><a href="be_clients.php">Témoignages</a></li>
</ul>
</li>
<li><a href="be_primes_permis.php">Conseils</a></li>
<li><a href="be_presse.php">Presse</a></li>
<li><a href="be_job.php">Emplois</a></li>
<li><a href="be_contact.php">Contact</a></li>
</ul>
</li>
</ul>
</div> 

quelqu'un a-t-il une idée sur l'origine du problème ?

Merci