Bug Menu déroulant IE7

Bonjour à vous,

J'ai fait un petit menu déroulant en suivant un tuto, j'ai remplacé les éléments par des boutons images.

Mon seul soucis, c'est que sur mes li déroulants, uniquement sous Internet Explorer 7, il apparaissent à côté du bouton principal au lieu d'en dessous

<div id="menu">   

<ul>   

  <li><a href="#">Item 1</a></li>   

  <li><a href="#">Item 2</a>   

    <ul>   

      <li><a href="#">Sous-item 1</a></li>   

      <li><a href="#">Sous-item 2</a></li>   

      <li><a href="#">Sous-item 3</a></li>   

    </ul>   

  </li>   

  <li><a href="#">Item 3</a></li>   

</ul>   

</div>   

Voici mon CSS:

#menu{   

margin-left:49px;   

}   

#menu ul {   

 margin:0;   
 padding:0;   
list-style-type:none;   
 text-align:center;   

 }   

#menu li {   

 float:left;   
margin:auto;   
 padding:0;   

 }   

 #menu ul li ul {   

 display:none;   

 }   

#menu ul li:hover ul {   
display:block;   

 }   

#menu li:hover ul li {   
float:none;   

 }   

#menu li ul {   

position:absolute;   

 }