Problème menu déroulant horizontal

Bonjour a tous,
voila j' ai comme un petit problème: je suis entrain de créer un site pour mon projet de fin d' année. J' ai donc voulu y intégrer un menu déroulant horizontal. J' ai tapé tous les codes comme il faut mais le truc, c' est que tout fonctionne parfaitement avec la nouvelle version de internet explorer ainsi que firefox, mais en ce qui concerne l' ancienne version d' explorer, dès que je veux accéder aux sous parties des différents menus avec la souris , le menu disparait, donc pas moyen d' accéder aux sous menus...Ce que je comprend pas, c' est que ca fonctionne parfaitement avec les 2 versions cités précédement. dc si quelqu' un avait la gentillesse de m' aider parce que là je bloque vraiment.
Voici mes codes:

JAVASCRIPT:

<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>




HTML


<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">accueil</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">origines</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="le_manga.html">le manga</a></li>
<li><a href="premiers_animes.html">1ers animés</a></li>
<li><a href="types_d_animes.html">types d'animés</a></li>
<li><a href="mangaka">le mangaka</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">en france</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="editeurs.html">éditeurs</a></li>
<li><a href="origine_france.html">l'origine</a></li>
<li><a href="diffusion.html">diffusion</a></li>
<li><a href="commerce.html">commerce</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">au japon</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="studiots_de_production.html">studiots de production</a></li>
<li><a href="processus_de_creation.html">processus de création</a></li>
<li><a href="origine_japon.html">l'origine</a></li>
<li><a href="budget.html">budget</a></li>
<li><a href="mode_de_vie.html">mode de vie</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">multimédia</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li><a href="extraits.html">extraits</a></li>
<li><a href="montage.html">montage</a></li>
<li><a href="lexique.html">lexique</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');">site</dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li><a href="contact.html">contact</a></li>
<li><a href="team.html">team</a></li>
<li><a href="#">forum</a></li>
</ul>
</dd>
</dl>
</div>




CSS:


#menu{
position:absolute;
left:410px;
top:126px;
width:481px;
height:23px;
z-index:100;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu dl {
float: left;
display: inline;
width: 70px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:white;
}

#menu dd {
display: none;
border: 1px solid gray;
}

#menu li {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
background: #cdd7e2;
}

#menu li a, #menu dt a {
color: #293d59;
text-decoration: none;
text-align:center;
display: block;
height: 100%;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}





Merci,
Loïc

Salut,
Proposition : pas de onmouseout sur le menu principal et sur le onmouseout du sous menu, tu caches aussi le menu principal.
A+.