Menu déroulant css/javascript

Bonjour ^_^

Je suis en train de tester un nouveau design sur un site, et j'ai prévu un menu déroulant en css avec une alternative javascript pour ceux qui seraient sous internet explorer (beuh )

L'adresse du site pour se rendre compte :
http://wizard-school.info/divers/Believe/

Le css : CSS

A la base j'ai utilisé un gabarit de alsacreations, tout marche comme il faut, j'ai mon menu de gauche :




















Désolé pour le schéma si c'est moche mais c'est pour bien expliquer le pourquoi du comment


Le bout du css pour le menu est ici (il est accessible sur le lien mais au cas ou ^^) :

#gauche {
position: absolute;
left:0;
width:150px;
background:#2789d4;
border:1px solid #000;
margin-top:10px;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-top:0;
margin-bottom: 5px;
padding-top:5px;
}
#menugauche li ul {
position:absolute;
left:150px;
background:#2789d4;
border:1px solid #000;
}
#menugauche li ul {
width:200px;
display:none;
margin-top:-5px;
}
/* Rubrique survolée */
#menugauche li:hover {
background:#fdd157
}
#menugauche li:hover ul {
display:block;
}

Sous firefox c'est nickel, sous internet explorer, le sous menu est décalé de quelques pixels et je ne sais pas pourquoi

quelqu'un saurait m'aider ?

Merchi d'avance

Bonjour,

Un autre problème doit être corrigé auparavant:

<li>
  <ul>
    <li>Personnages principaux</li>
    <li>Personnages secondaires</li>
    <li>Derniers ajouts</li>
    <li>Rechercher un personnage</li>
  </ul>
  <a href="#" title="Les personnages">Les personnages</a>
</li>
<li>

Le lien de premier niveau n'a pas de sens tel qu'il est placé (après le sous-menu). Pour que la structure HTML soit cohérente et accessible, il doit précéder les listes de second niveau.

Ben je l'avais mis en haut mais du coup ca décale le sous menu par la suite sauf si je met un margin negatif mais je sais pas si c'est tout à fait correct si ?