Besoin aide pour création d'un sous-menu horizontal [résolu]

Bonjour à tous,

Même si ce n'est pas très recommandé pour des raisons d'ergonomie j'aimerais pouvoir créer un menu horizontal avec un sous-menu horizontal lui aussi... comme sur l'image suivante :



J'ai suivi un petit tuto dont vous trouverez le code CSS ci-dessous mais le résultat n'est pas exactement ce que j'attends.

En fait, je voudrais que le sous-menu horizontal soit de la même largeur que celle du menu général (voir image). Or ici ce n'est pas le cas.

Qui peut corriger ce code ou m'indiquer le moyen de créer un tel menu ?

Merci d'avance pour votre aide.

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

Modifié par Florent V. (25 Apr 2010 - 10:34)

Problème résolu.
J'ai trouvé un tuto et le code qui me convient.
Pour ceux que ça intéresserait :
http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
Modifié par jpv56 (25 Apr 2010 - 08:38)

Trois remarques en passant:

1. Ne jamais appliquer un style destiné à des éléments précis (ceux de ton menu de navigation) en utilisant des sélecteurs aussi génériques que ul {...}, ul li {...}, etc. Utiliser des sélecteurs plus spécifiques si ces styles n'ont pas vocation à s'appliquer à TOUTES les listes non ordonnées du site.

2. Si ton problème est résolu, tu peux modifier le titre de ton sujet pour y ajouter la mention «[Résolu]». Tu peux modifier le titre du sujet en éditant le premier message dans le sujet.

3. Tu devrais pouvoir éditer tes messages sur le forum quand il y a des choses à corriger, par exemple la mise en forme des blocs de code. Il y a un bouton «éditer» en haut à droite de chacun de tes messages (pour peu que tu sois déjà identifié sur le forum).