Menu déroulant incompatible explorer

Bonjour à tous,

Je développes un site pour un lycée. Dans ce site je veux mettre un menu horizontal et déroulant. Sur firefox il marche parfaitement. Cepndant sur explorer les menu ne se déroule pas. Comment le rendre compatible avec explorer.
Voici ma page de code...

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").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);
//--><!]]></script>

<body>
<div>
<ul id="nav">
<li>Ajout</a>
<ul>
<li><a href="#">Professeur</a></li>
<li><a href="#">Salle</a></li>
<li><a href="#">Poste</a></li>
<li><a href="#>Marque</a></li>
<li><a href="#">Type de financement</a></li>
</ul>
</li>
<li>Suppression</a>
<ul>
<li><a href="#">Professeur</a></li>
<li><a href="#">Salle</a></li>
<li><a href="#">Poste</a></li>
<li><a href="#">Marque</a></li>
<li><a href="#">Type de financement</a></li>

</ul>
</li>
<li>Modification</a>
<ul>
<li><a href="#">Professeur</a></li>
<li><a href="#">Salle</a></li>
<li><a href="#">Poste</a></li>
<li><a href="#">Marque</a></li>
<li><a href="#">Type de financement</a></li>
</ul>
</li>
</ul>

...ainsi que mon css

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 10em;
text-align:center;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}

Si vous pouviez m'aider sa serai vraiment sympa.Merci

Configuration: Windows XP
Firefox 2.0.0.12