Probléme sous IE avec Menu

Bonjour, j'aurais besoin d'un petit coup de main pour réparer un problème que j'ai sous IE avec un menu disponible dans la Galerie de menus. Ce menu.

Code HTML

<div id="horizontal"><div id="horizontal2"><dl><dt onmouseover="javascript:montre();"><a href="../"><img src="../images/accueil.gif" alt="Accueil" /></a></dt></dl>
<dl><dt onmouseover="javascript:montre();"><a href="http://www.gtanf.com/forums/"><img src="../images/forums.gif" alt="Forums" /></a></dt></dl>
<dl><dt onmouseover="javascript:montre('smenu1');"><img src="../images/lejeu.gif" alt="Le Jeu" /></dt>
<dd id="smenu1">
<ul><li><a href="../?page=cartes">Cartes</a></li>
<li><a href="?page=fiche">Fiche</a></li>
<li><a href="galerie/">Galerie d'images</a></li>
<li><a href="../?page=gangs">Gangs</a></li>
<li><a href="../?page=mysteres">Mystères</a></li>
<li><a href="../?page=personnages">Personnages</a></li>
<li><a href="../?page=radios">Radios</a></li>
<li><a href="../?page=ville">Villes</a></li></ul></dd></dl>
<dl><dt onmouseover="javascript:montre('smenu2');"><img src="../images/aides.gif" alt="Aides" /></dt>
<dd id="smenu2">
<ul><li><a href="../?page=astuces">Astuces</a></li>
<li><a href="../?page=codes">Codes</a></li>
<li><a href="../?page=jobs">Jobs</a></li>
<li><a href="../?page=missions">Missions</a></li>
<li><a href="../?page=missions_annexes">Missions annexes</a></li>
<li><a href="../?page=rodeos">Rodéos</a></li>
<li><a href="../?page=sauts">Sauts</a></li>
<li><a href="../?page=tutoriaux">Tutoriaux</a></li></ul></dd></dl>
<dl><dt onmouseover="javascript:montre('smenu3');"><img src="../images/partenaires.gif" alt="Partenaires" /></dt>
<dd id="smenu3">
<ul><li><a href="http://www.gtabig.com/" onclick="window.open(this.href); return false;">GTABig.com</a></li>
<li><a href="http://www.gtafight.com/" onclick="window.open(this.href); return false;">GTAFight.com</a></li>
<li><a href="http://www.gtaplay.com" onclick="window.open(this.href); return false;">GTAPlay.com</a></li></ul></dd></dl></div></div>

Code CSS

#horizontal{width: 800px; height: 50px; float: right; background-image: url("images/pub.gif");}
#horizontal2{position: relative; float: left; top: 6px; left: 30px; z-index: 1;}
#horizontal dl{float: left; width: 148px; margin: 0;}
#horizontal dt{cursor: pointer; text-align: center; margin: 0;}
#horizontal dd{display: none; border: 1px solid #FFBB00; width: 148px; margin: 0;}
#horizontal ul{margin: 0; padding: 0; list-style-type: none;}
#horizontal li{text-align: center; background: #000000;}
#horizontal li a, #horizontal dt a{color: #FFFFFF; text-decoration: none; display: block; height: 100%; border: none;}
#horizontal li a:hover, #horizontal dt a:hover {background: #EEEEEE; color: #000000;}

Je pense que ce problème est principalement dû à un z-index mais après une multitude de tentative je n'ai pas pu le régler, j'ai donc laisser le z-index: 100; et enlevé les autres.

Vous pouvez voir le problème ici même.

Mes salutations.
Modifié par Grarem (21 Jun 2006 - 10:09)