CSS / Menu déroulant horizontal.

Bonjour tout le monde, je suis un petit nouveau ici.

Je trouve le site très bien et m'a débloqué dans pas mal de situation. Mais voila, je suis tombé sur un autre problème. J'ai cherché la solution et je n'ai pas trouvé.

J'espère que vous pourrez mis aider. J'ai pris des lignes de code sur ce site justement pour faire un menu déroulant avec l'effet lorsque l'on passe la souris dessus l'image change.

Mais je n'arrive pas à le mettre en horizontal, il reste toujours en vertical.

voici les lignes de code.

ul#menu
{
margin: 15 ;
padding: 25 ;
list-style-type: none ;
width: 170px;
display: block;

}

ul#menu li
{
margin: 0 0 5px 0 ;
padding: 0 ;
align-text: center;

}

ul#menu li a
{
display: block ;
width: 170px ;
line-height: 30px ;
color: #000 ;
text-indent: 40px ;
align-text: center;
text-decoration: none ;
background: URL(css/icone.jpg) no-repeat 0 0px ;
border: 1px solid #dbd ;


}

ul#menu li a:hover
{
background: URL(css/icone.jpg) no-repeat 0 -30px ;
border: 1px solid #f97 ;
text-decoration: underline;
}


<ul id="menu">

<li><a href="page_principale.html">Accueil</a></li>
<li><a href="x.html">Garçons</a></li>
<li><div class="outer"><a href="#"></a></li>
<li><div class="outer"><a href="#">Contact</a></li>
<li><div class="outer"><a href="#">panier</a></li>

</ul>

Si vous voyez aussi des erreurs ou des choses qui ne servent a rien je suis preneur


je vous remercie.

Bonne journée.

Bonjour Don-JGaataka,

D'après tes codes (html et css), je ne suis pas très sûr qu'il s'agisse d'un menu déroulant !?

Si l'on part de l'hypothèse que tu veux produire un menu horizontale stylisé via css comme le montre ce tutoriel d'Alsacreations par exemple, il te faut corriger quelques erreurs :

Le menu :

- Seule la valeur nulle 0 (zéro) admet l'absence d'unité (em, px, pt, %, cm, mm...)
donc :

ul#menu {
margin: 15[#blue]px[/#] ;
padding: 25[#blue]px[/#]  ;

- Tu déclares une dimension de 170px pour ce menu , il va être assez difficile d'y faire tenir 5 items de la même taille, tout en ayant le comportement que tu souhaites obtenir, non ?
Donc:
Soit tu ne spécifies aucune dimension à ton menu, soit tu calcules précisemment l'espace de ce menu (dimension items + marges + paddings), soit tu spécifies une dimension de 100%, ce qui du même coup résoud un bug d'opéra.
nb: le display:block n'est pas absolument indispensable ici.

Les listes :

Si tu souhaites que tes listes se positionnent les unes à la suite des autres et non les unes sous les autres il faut choisir une propriété qui gère ce comportement, float me semble tout indiqué ici :

ul#menu li{
[#blue]float:left;(ou right)[/#]
...
}

Tu pourras spécifier l'espace entre tes blocs de liens via les marges, par exemple :

ul#menu li a {
margin:0 3px;
...
}

Tu choisis évidemment les valeurs que tu souhaites

nb:
-Il est "d'usage"; (recommandé ?) d'écrire en minuscule, par exemple :

background: [#blue]url[/#](css/icone.jpg) no-repeat 0 0px ; 

et "éventuellement" de spécifier une couleur de fond au cas où ton image serait indisponible (ça ne coute rien)
-Si tu ne spécifies pas de hauteur à ton block de liens et que tu laisses ce dernier vide, le résultat est peu probant, donc soit tu définis une hauteur (height:30px; par exemple) soit tu insères un espace insécable ( )

Je ne sais pas à quoi correspond la "class:outer", mais pour information, tu peux parfaitement l'appliquer à tes listes :

<ul id="menu">
<li><a href="page_principale.html">Accueil</a></li>
<li><a href="x.html">Garçons</a></li>
<li class="outer"><a href="#"></a></li>
<li class="outer"><a href="#">Contact</a> </li>
<li class="outer"><a href="#">panier</a></li>
</ul>

Voilà, je pense avoir fait le tour, et sauf erreur ou omission, cela devrait fonctionner, et tu devrais avoir le rendu visuel que selon moi, tu souhaitais avoir.

Si tel n'est pas le cas, n'hésites pas à préciser ta pensée, à mettre une page en ligne pourquoi pas

Cdt,
Sylvain