Discussion :

[muganga]

Bonjour, je suis nouveau ici et je vous écris car après de nombreuses recherches je ne trouve pas de réponse à mon problème.
J'ai créer un menu déroulant en css mais je n'arrive pas à y inclure de sous-menu; je vous joins ci-dessous le code de mon menu pour que vous y voyez plus clair.
Je cherche donc à inclure des sous-menus à mes menus pré-existants.
J'espère que vous pourrez m'aider.
Cordialement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul id="menu">
  <li><a href="#" class="active"><span>Accueil</span></a></li>
  <li><a href="#"><span>Chronologie</span></a></li>
  <li><a href="#"><span>Diablo</span></a></li>
  <li><a href="#"><span>Starcraft</span></a></li>
  <li><a href="#"><span>Warcraft</span></a></li>
  <li><a href="#"><span>World Of Warcraft</span></a></li>
  <li><a href="#"><span>A venir ...</span></a></li>
</ul>

Et le code code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu{width: 100%; margin: 0 auto; padding: 0; height: 30px; position: absolute; top: 300px; width: 100%; display: block; background: url(../Images/menu_images.png) repeat-x; list-style-type: none; border: 0;}
#menu li{padding: 0; margin: 0; list-style: none; float: left; position: relative; left: 28%; border: 0;}
#menu li a{float: left; padding-left: 15px; display: block; color: rgb(255,255,255); text-decoration: none; font: 12px Verdana, Arial, Helvetica, sans-serif; cursor: pointer; background: url(../Images/menu_images.png) 0px -30px no-repeat;}
#menu li a span{line-height: 30px; float: left; display: block; padding-right: 15px; background: url(../Images/menu_images.png) 100% -30px no-repeat;}
#menu li a:hover{background-position: 0px -60px; color:rgb(255,255,255);}
#menu li a:hover span{background-position: 100% -60px;}
#menu li a.active, .menu li a.active:hover{line-height: 30px; font: 12px Verdana, Arial, Helvetica, sans-serif; background: url(../Images/menu_images.png) 0px -90px no-repeat; color: rgb(59,172,246);}
#menu li a.active span, .menu li a.active:hover span{background: url(../Images/menu_images.png) 100% -90px no-repeat;}

[RomainVALERI]

Tu tombes bien il y a d'excellents tutoriels sur les menus déroulants en CSS sur developpez ^^

[muganga]

Bonjour.
Merci pour ta réponse.
J'avais déjà essayé ce tutoriel mais avec cette méthode je n'arrive pas à inclure l'apparence de mon menu.
En fait, j'ai créé une image pour mon menu à l'aide de gimp et avec cette méthode je ne peux pas inclure cette image (background du menu en fait).
J'espère que vous pourrez m'aider.
Si vous pouviez me taper un début de code pour faire un menu graphique avec sous-menus.
Cordialement.

[c_s_s]

Tu as une page en ligne pour voir ce fameux background.

Peut-être qu'il sera plus simple d'intégrer ton image sur un autre menu, plutôt que d'adapter ton menu actuel.