Pb menu et sous menu vertical sous IE : restent visibles après un clic

Bonjour,
J'ai fait un menu vertical (qd on survole ces différents menus, on fait apparaitre une sous rubrique, que l'on peut elle même survoler pour voir une sous sous rubrique), j'ai utilisé les infos de ce site pour faire ce menu : http://www.htmldog.com/articles/suckerfish/dropdowns/ (two level dropdown menu). Sous firefox, tout va bien. Sous IE, l'affichage est ok, le problème est que lorsque je clique sur une sous sous rubrique et qu'ensuite je bouge ma souris, tout reste tout de même affiché, au lieu de disparaitre comme cela le fait sur firefox, et dans le modèle de htmldog.com.
Quelqu'un a t il déjà rencontré ce problème?
Merci de votre aide. J'ai passé beaucoup de temps à essayer de trouver la solution...et hélas, ça ne marche toujours pas....

Voila ci dessous un bout du code html, la partie concernant les listes déroulantes, et la css correspondantes:
page html:
<div id="contenu">
<div id="catalogue">
<ul id="nav">

<li><a href="signalisation.html">&#9642; SIGNALISATION ET SECURITE ROUTIERE</a></li>
<li ><a href="revetements.html">&#9642; REVETEMENTS</a>
</li>
<li><a href="stations_epuration.html" >&#9642; STATIONS D'EPURATION PVS</a>
</li>

<li class="triangle_gris"><a href="#" >&#9642; GEOTHERMIE</a>
<ul>
<li class="triangle_gris"><a href="#" >COULIS / CEMENT</a>
<ul>
<li><a href="#">lien 1A</a> </li>
<li><a href="#">lien 2A</a> </li>
<li><a href="#">lien 3A</a> </li>
</ul>
</li>
<li class="triangle_gris"><a href="#">SONDES</a>
<ul>
<li><a href="#">lien 1B</a> </li>
<li><a href="#">lien 2B</a> </li>
<li><a href="#">lien 3B</a> </li>
</ul>
</li>
<li class="triangle_gris"><a href="#">MELANGEUR</a>
<ul>
<li><a href="#">lien 1C</a> </li>
<li><a href="#">lien 2C</a> </li>
<li><a href="#">lien 3C</a> </li>
</ul>
</li>
</ul>
</li>
<li class="triangle_gris"><a href="#">&#9642; PRODUITS DIVERS</a>
<ul>
<li><a href="grille.html">GRILLE ANTI-DERAPANTE</a> </li>
<li><a href="hydrofuge.html">PRODUITS HYDROFUGES ET OLEOFUGES</a> </li>
<li><a href="canalisations.html">CANALISATIONS PEHD</a> </li>
<li><a href="mortier.html">MORTIER</a> </li>
</ul>
</li>
</ul>
</div>
<div id="corps">
</div>
</div>
<div id="pied_de_page">
</div>

css:
#nav, #nav ul { /* all lists */
margin:0;
padding: 0;
list-style: none;
float : left;
width : 154px;
background-color : #F5DB8E;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height:20px;
margin-bottom : 5px;
width : 154px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
padding-left: 5px;
width: 11em;
w\idth : 10em;
display : block;
text-decoration : none;
font-family:"Arial Narrow", Arial;
font-size:14px;
color: #336633;
}


#nav li a:hover {
background-color : #F5E6BA;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
.triangle_gris {
background: url(img/commun/triangle_gris.jpg) center right no-repeat;
}

Bonjour et bienvenue merlette

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation