Probleme css menu deroulant internet explorer

Bonjour,
je suis en train de créer un site et j'ai un probleme avec le menu principal (déroulant) sous internet explorer.
les sous menu qui contiennent aussi des sous menu s'affichent bien sous firefox/safari mais avec une marge entre les éléments sous IE que je n'arrive pas à enlever. De plus les sous menu de ces sous menu (désolé c'est compliqué) s'affichent eux aussi décalés.

voici le site: http://guidou.over-blog.org/
Passer la souris au dessus de "seniors" pour voir ce que je veux dire.
Sous firerox/safari le menu est idéal (enfin pour moi)

Merci de votre aide pour résoudre ce probleme.
(Au fait je suis nouveau en css c'est mon premier site et je n'ai qu'une semaine d'expérience donc si c'est quelque chose de "logique" excusez m'en)

voici le code html pour le menu:
<ul id="menuDeroulant">
<li id="accueil"> <a href="#">accueil</a> </li>
<li> <a href="#">Ecole de rugby</a>
<ul class="sousMenu">
<li> <a href="#">lutin/mini-poussins</a> </li>
<li> <a href="#">poussins</a> </li>
<li> <a href="#">benjamins</a> </li>
<li> <a href="#">minimes</a> </li>
</ul>
</li>
<li> <a href="#">Cadets</a>
<ul class="sousMenu">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
<li> <a href="#">Juniors</a>
<ul class="sousMenu">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
<li> <a href="#">Seniors</a>
<ul class="sousMenu">
<li> <a href="#">Equipe 1</a>
<ul class="special2">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
<li> <a href="#">Equipe 2</a>
<ul class="special">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Folklo</a>
<ul class="sousMenu">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
<li> <a href="#">Feminines</a>
<ul class="sousMenu">
<li> <a href="#">Classement</a> </li>
<li> <a href="#">Calendrier</a> </li>
<li> <a href="#">Entrainements</a> </li>
<li> <a href="#">Groupe</a> </li>
</ul>
</li>
</ul>



et le code css:
/* liste page principale */

#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
text-color: white;
width: 100%;
margin-left: 10px;
margin-right: auto;
}

#menuDeroulant li
{
float: left;
width: 115px;
margin: 0;
padding: 0;
border: 0;
}


#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: white;
background: black;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}


#menuDeroulant li a:hover
{
background-color: #F2462E;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: white;
margin: 0;
border: 0;
text-decoration: none;

}
#menuDeroulant .sousMenu li a:hover,
{
background-image: none;
background-color: #F2462E;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

body {background: #AFA99B ;padding: 0px; margin: 0px;}

#accueil, #accueil a:link
{
background: rgb(177, 188, 180);
}

#menuDeroulant :hover ul :hover >
.special
{position: absolute;
display: inline;
left:590px;
top: -60px;
;
}

#menuDeroulant :hover ul :hover >
.special2
{position: absolute;
display: inline;
left:590px;
top: -84px;
;
}


.special, .special2
{
list-style-type: none;
display: none;}

.special li, special2 li
{display: block;}