Menu déroulant horizontal avec display:inline

Bonjour,
je cherche à créer un menu déroulant horizontal simple : un mot par entête centré à gauche mais avec un padding-left fixe. En fait je veux avoir un écartement entre les mots qui soit constant.
J'y arrive mais les déroulants partent dans tous les sens.
Je vous donne le CSS.

#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:left;
}
#menu li {
display:inline;
margin:auto;
padding-right:5em;
background-color:black;
}
#menu li a {
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;
} 

Le code ne fonctionne plus à partir de #menu ul li ul
Le html est des plus standard <ul><li><ul> et la suite imbriquée.

Pourriez-vous me filer un coup de main, merci d'avance.

Bonsoir,


Avec juste la CSS, c'est un peu limite.
On va imaginer que ton HTML ressemble à cela :

<nav id="menu">
      <ul>
            <li><a href="#">Élément 1</a></li>
            <li>
                  <a href="#">Élément 2</a>
                  <ul>
                        <li><a href="#">Élément 2-1</a></li>
                        <li><a href="#">Élément 2-2</a></li>
                        <li><a href="#">Élément 2-3</a></li>
                  </ul>
            </li>
            <li><a href="#">Élément 3</a></li>
            <li><a href="#">Élément 4</a></li>
      </ul>
</nav>

Dans un premier temps, pourquoi utiliser float:none; alors qu'aucun de tes éléments ne flotte ?

Ensuite, un menu déroulant à besoin de quitter le flux pour fonctionner. Pour cela, les sous-menus doivent être en position: absolute.
Le souci c'est qu'avec ce type de positionnement, ils vont se retrouver positionnés par rapport à leur dernier parent positionné, à savoir ici, rien d'explicite.
Il faut donc donner comme référentiel le parent, à ici ce sera le LI (de premier niveau), en lui donnant simplement une valeur de position: relative;

Avec ces quelques infos tu devrais pouvoir améliorer ton code et faire d'autres essais

Bonne soirée.
Modifié par Geoffrey C. (10 Dec 2011 - 00:18)

Bonjour Geoffrey,

merci de ta réponse, ça m'a fait avancer. Les sous-menu s'ouvrent sous le menu principal au lieu de tout décaler.

Ce n'est pas tout à fait ça. Les sous-menus s'ouvrent totalement à gauche du menu principal, ils ne sont pas dans l'alignement de leur balise <li> de 1er niveau que j'ai bien mis en positionnement relative. Aurais-tu une idée?

Bonne journée

J'ai trouvé.

j'ai mis le menu supérieur en float:left et width:100% avec un padding-right approprié j'obtiens un écartement fixe entre les mot du menu.

Encore un merci à ce superbe site. (et à Geoffrey qui m'a permis de rebondir quand j'étais coinçé)