Probleme menu déroulant explorer/firefox

Bonjour à tous,

alors voila je suis entrain de faire un site web qui contient un menu deroulant .
Ca marche tres bien sous firefox mais internet explorer me pose des problemes...
les menus ne se deroulent pas sous IE donc je suppose que ca vient du code javascript ...
jai mon code html, css et javascript dans 3 pages differentes. et j'ai bien inclus dans ma page html les fichiers css et javascript.
Quelqu'un connait la solution pour que les 2 navigateurs acceptent mon code?? merci d'avance

voila les codes:


//html

<tr>
<td height="27">
<ul id="deroul">
<li><a href="index.php?page=0">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Real Time PCR Reagent</a>
<ul>
<li><a href="index.php?page=1">Perfect Master Mix</a></li>
</ul>
</li>
<li><a href="#">Real Time PCR Assays</a>
<ul>
<li><a href="index.php?page=2">Human genes</a></li>
<li><a href="index.php?page=3">Mouse genes</a></li>
<li><a href="index.php?page=4">Plant genes</a></li>
<li><a href="index.php?page=20">Endogenous control</a></li>
<li><a href="index.php?page=5">Other species genes</a></li>
</ul>
</li>
<li><a href="#">Signaling Cascade</a>
<ul>
<li><a href="index.php?page=6">Angiogenesis</a></li>
<li><a href="index.php?page=7">Apoptosis</a></li>
<li><a href="index.php?page=8">Cell cycle</a></li>
<li><a href="index.php?page=9">Others</a></li>
</ul>
</li>

<li><a href="#">Isoforms</a>
<ul>
<li><a href="index.php?page=10">VEGF</a></li>
<li><a href="index.php?page=11">FGFR</a></li>
<li><a href="index.php?page=12">Others</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="index.php?page=13">Services</a></li>

<li><a href="#">Clinical tests</a>
<ul>
<li><a href="index.php?page=14">Leukemia</a></li>
<li><a href="index.php?page=15">Breast</a></li>
<li><a href="index.php?page=16">Cancer</a></li>
</ul>
</li>

<li><a href="index.php?page=18">Contact us</a></li>
<li><a href="index.php?page=23">Basket</a></li>

</ul>

</td>
</tr>




//le css





#deroul, #deroul ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 30px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */

}

#deroul /* Ensemble du menu */
{
font-weight : bold; /*on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 10.8px; /* hauteur du texte : 12 pixels */
}
#deroul a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000066; /* couleur de fond */
color : #CCD8E6; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 139.5px; /* largeur */
}
#deroul li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroul li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#deroul li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */

}


#deroul li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-bottom : 0px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #deroul li ul li
{
border-top : 0px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#deroul li ul ul
{
margin : -31px 0 0 140px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #deroul li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#deroul a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000066; /* On passe le texte en noir... */
background: #CCD8E6; /* ... et au contraire, le fond en blanc */
}
#deroul li:hover ul ul, #deroul li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#deroul li:hover ul, #deroul li li:hover ul, #deroul li.sfhover ul, #deroul li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}



//le javascript


sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);