Compatibilité menu deroulant IE

Bonjour,

je travail actuellement à l'élaboration d'un site internet pour une association et le problème suivant apparait.

Je souhaite faire un menu horizontale déroulant, malheureusement sur Internet Explorer cela ne fonctionne pas.

Dans un premier temps j'avais réalisé les différents éléments du menu grâce à des images, ce que IE interprétait très bien, puis je me suis rendu compte que ce n'était pas la meilleur technique pour bien référencer son site web.

J'ai donc souhaité faire ce même menu avec une image en background et insérer dans une balise < a > le texte correspondant.......sans succés sur IE (cela fonctionne avec firefox).

Pouvez vous m'indiquer ce qui ne va pas dans mon script svp ?

Voici le menu en html :

<div class="menu">
<ul id="menu">

		<li>
		<a href="#" style="width: 117px;"> &nbsp;&nbsp;&nbsp;L'Association </a>
        

	         <ul>
			 
			 <li id="menusouscategorie">	<a  href="#" style="width: 116px; color:#000000;"> &nbsp;&nbsp;&nbsp;Missions </a>	 </li>
			 
			  <li id="menusouscategorie">	<a  href="#" style="width: 116px; color:#000000;"> &nbsp;&nbsp;&nbsp;Présentation </a>	 </li>
			 </ul>
	  </li>
			 
			 <li> <a href="#" style="width: 202px;"> &nbsp;&nbsp;&nbsp;Missions/établissements </a> </li>
			 
			 <li> <a href="#" style="width: 131px;"> &nbsp;&nbsp;&nbsp;Documentation </a> </li>
			 
			 
			 
			 <li> <a href="#" style="width: 134px;"> &nbsp;&nbsp;&nbsp;Offres d'emploi </a> </li>
			 
			 <li> <a href="#" style="width: 102px;"> Contacts </a> </li>
</ul>
</div>

et le css qui va avec :

.menu {
border: 0px;
height: 50px;
width: 1025px;

}

#menu, #menu ul {
padding : 0; 
margin : 0; 
list-style : none; 
line-height : 25px; 
text-align : center; 
border: 0px;
}

#menu {
font-weight : bold;
font-family : verdana;
font-size : 13px; 
}

#menu a {
display : block;
padding : 0; 
background : #000;      
color: #FFFFFF;
text-decoration : none; 
background: url(../Fichiers/Images/Boutons/Menu/missionetablissement.gif) left top no-repeat;
}

#menu li  { 
float : left;      
}

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


#menu li ul li {
border-top : 0px solid transparent; 
}

#menu li ul ul {
margin : 22px 0 0 144px ; 
border-left : 0px solid #fff ;   
}


#menu a:hover {
color: #FFFFFF; 
background: #fff;
background: url(../Fichiers/Images/Boutons/Menu/missionetablissement2.gif) left top no-repeat ;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em; 
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
        left: auto; 
        min-height: 0; 
}

#menusouscategorie a:hover {
color: #FFFFFF; 
background: #fff;
background: url(../Fichiers/Images/Boutons/Menu/souscategoriepetitover.gif) left top no-repeat ;
}

#menusouscategorie a {
background: url(../Fichiers/Images/Boutons/Menu/souscategoriepetitout.gif) left top no-repeat ;

}

Pour infos les images ont les dimensions suivantes :

missionetablissement : 25x210
missionetablissement2 : 25x210
souscetegoriepetitover : 24x116
souscetegoriepetitout : 24x116


Je vous remercie pour l'aide que vous pourrez m'apporter,

Simon Jacquemin