Menu déroulant, javascript et bug d'affichage

[akd]

Bonjour,

je travaille actuellement sur un site et étant débutante, j'ai utilisé un tutorial assez simple pour créer des menus déroulants.

Les menus ont un comportement corrects sous Mozilla ( il s'affiche verticalement en dessous de l'objet quand on passe la souris dessus).

Comme ca ne marchait pas sous IE à l'origine j'ai mis un petit script JS pour simuler le fonctionnement; par contre maintenant, le menu s'affiche avec un décallage d'un objet vers la droite et par dessus le menu et je n'arrive pas à comprendre pourquoi.

Partie du CSS concernant les menus:

/* style features
-------------------------- */
#mainmenu {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	}

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

#mainmenu li {
	float:left;
	margin: 0;
	padding: 0;
	}

#mainmenu li ul {
	position:absolute;
	left: -999em;
	}

#mainmenu li:hover ul, #mainmenu li.sfhover ul{
	left:auto;
	}

#mainmenu li a {
	display:block;
	margin-bottom: 0;
	border: 0;
	}

#mainmenu li a:hover {
	border: 0;
	}

#mainmenu li.here a:hover {
	border: 0;
	}

#mainmenu li.here a {
	border: 0;
	}

Et le java script:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfhover = function() {
	var sfEls = document.getElementById("mainmenu").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>

Si vous avez une idée du pourquoi ça m'aiderait grandement.

(Le script en situation : http://www.pentacles-mayhem.com/ ).

Merci d'avance pour votre aide.