Sous menu Horizontal

bonsoir à tous,
je bosse actuellement sur un menu horizontal avec sous menu (horizontal lui aussi).
j'ai voulu partir d'un code propre, il s'agit de ce code là :

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

le but étant d'arriver au même résultat mais avec le sous-menu horizontal.

voici le code html :

<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>

et voici le css :

#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}

l'auteur ajoute ceci dans les balises d'en-tete :

</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style><![endif]-->

j'ai fait une tentative en modifiant ceci

#menu li:hover ul li {[b]float:left;[/b]}

ça fonctionne parfaitement sous firefox. c'est le résultat que je souhaite.
le problème d'affichage arrive avec IE7.

Que dois-je faire?

Merci d'avance pour vos conseils.

Raph
Modifié par perinus (10 Sep 2009 - 19:01)

c'est bon, j'ai trouvé...

il suffisait d'ajouter :

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

}

Salut,

Problème [Résolu] donc ?