Menu déroulant

Menu déroulant 2 niveaux

Comme il y avait pas mal de demandes je me suis amusé à faire un :
menu-deroulant-2-niveaux
Pour le code il y a juste à afficher le code source.

Menu déroulant horizontal

Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée.

Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique :

left: -999em (cacher) et left: auto (montrer)

Utilisation de left

Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative).

Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Dans le cas contraire, à l’apparition de celui-ci, les liens du menu seraient décalés.

Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension :

Code HTML


<ul id="menu-deroulant">
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li><!--
 --><li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
</ul>

Code CSS


#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

ce qui nous donnes (ah oui, c’est du brut…) :

INFO : les commentaires html vides que vous pouvez voir entre chaque <li> du menu sont là pour palier à un problème du display:inline-block. En effet, celui-ci génère un white-space entre les éléments.

D’autres techniques existent mais je trouve celle-ci plus « propre ». (Plus d’infos sur Alsacréations).

Rien ne vous empêche également de les laisser. Cela crée un espace de 4px entre les liens et ce n’est pas désagréable.

Une autre technique : max-height

La méthode left:-999em n’étant pas idéale non plus, voici une autre technique « pêchée » sur le blog de CreativeJuiz de Geoffroy Crofte.
L’avantage de celle-ci c’est que l’on peut faire une transition CSS3 sur le sous menu : le faire apparaître progressivement plutôt que d’un coup.

La même transition avec left, ferait apparaître bêtement le menu de la gauche, ce qui n’est pas terrible…

INFO : la propriété CSS3 « transition » n’est pas reconnu par IE9 et inférieure.

Voici un menu, un peu plus sexy que le premier, qui utilise cette technique :

Code HTML


<ul id="menu-demo2">
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 3</a>
		<ul>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 4</a>
		<ul>
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
		</ul>
	</li>
</ul>

Code CSS


#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

Vous remarquez que grâce aux sélecteurs on utilise qu’un seul ID pour tout cibler.

Inutile donc, comme on le vois souvent, de surcharger votre code HTML de classes et d’ID.

INFO : le .3s que j’utilise sur la transition permet au menu ne pas remonter de suite quand on quitte le survol.

L’astuce en plus

Je vois souvent une demande : « comment faire pour que mon lien de menu reste avec la couleur :hover quand je survole le sous-menu ? »

Le truc est simple, il faut mettre le changement de couleur sur le :hover du <li> et non pas du <a>. Astuce que j’ai utilisée pour le menu que l’on vient de voir.

D’autres menus

Maintenant que vous avez le squelette et le fonctionnement, libre à vous de laisser courrir votre imagination pour habiller vos menus ou leur appliquer d’autres effets de transition.

Chose que je fait régulièrement avec plus ou moins de réussite…

324 commentaires sur “Menu déroulant”

  1. Bonjour,
    J’ai trouvé ton lien sur le site du zéro. Je suis en train de concevoir mon site de chat (je suis un siamois…) et je le construis en apprenant html et css sur le site du zéro et, maintenant, sur le site w3scholls.
    Pour continuer à progresser, j’avais envie de réaliser un menu déroulant. Quand j’ai découvert le lien vers ta page, je me suis précipité.
    J’ai recopié ton premier exemple pour voir ce que ça donnait et… rien…
    En fait, en cherchant, je crois avoir compris. Je crois, dans le dernier paragraphe, que ce que tu écris :
    #menu-deroulant ul {
    position: absolute;
    /* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    }
    envoie à -999em tout ton menu…

    En remplaçant par li ul, le menu apparaît bien…
    Mais je n’arrive pas à mettre en ligne les « liens menu 1″…
    Si tu as une idée, je suis preneur.
    Belle journée à toi,
    Eschylle

  3. Salut !

    Bravo et merci pour ton tutoriel c’est très clair.

    Toutefois, j’ai une question de débutant ;

    Comment peut-on faire pour que les sous-menus s’ouvrent sur une ligne horizontale plutôt qu’en liste verticale ?

    Merci, ça m’arrangerais beaucoup de savoir comment faire ça.

  4. Salut Cyan,
    et bien c’est très simple en fait.
    le code qui aligne les lien du menus est celui-ci :
    #menu-deroulant li {
    display: inline-block;
    }
    Et pour annuler cet alignement sur les sous menus le code est celui-ci :
    #menu-deroulant ul li {
    display: inherit;
    }
    Tu as donc juste à supprimé display:inherit pour que les liens du sous menus soient à l’horizontal comme les liens du menu.

    • Bonjour,

      Merci pour votre super tuto sur les menus !

      Par contre, j’ai suivi le commentaire proposant de modifier les sous-menu verticaux en sous-menu horizontaux en supprimant « display: inherit; », mais lorsque je le supprimer, cela ne change rien … Y aurait-il autre chose à modifier ou ai-je fait une erreur ou mal compris quelque chose ?

      En vous remerciant.

      Cordialement
      Julien

      • Salut Julien,
        je pense que tu parles du menu coloré.
        Dans ce cas il faut faire deux autres modifications.
        Enlever le position: relative sur #menu-demo2 li et le width: 100% sur #menu-demo2 ul.
        Ces deux lignes de code force le sous menu à avoir la même largeur que les liens du menu.
        Le contraire de ce que tu cherche à faire ^^

        Merci de ton commentaire positif ^^

        • Bonjour ronamazona,
          ayant fait les modifications nécessaires pour afficher ton sous-menu en position horizontale,
          Primo, comment faire pour qu’il soit tout à gauche , exactement sous le 1er li, et non sous le li « hovéré ».
          Secondo, comment afficher le ul li ul li au clic, et non au hover?
          Je vous envoie un message plus explicite sur sdz ( pardon openclassrooms !)

          En vous remerciant,

  5. Bonjour,

    je débute sous html5 et css3. J’ai un souci avec ton code de menu déroulant, même dans sa version la plus simple. J’aimerais l’utiliser pour mon appli web. Hors pour l’instant, il y a juste la mise en 1 ligne horizontale du 1er niveau de menu qui fonctionne, les sous-menus n’apparaissent pas, du tout.
    J’ai beau chercher je vois pas l’erreur que j’ai faite. Bon en même temps, je débute.
    Est ce que je peux t’envoyer le code html et css, pour que tu me dises l’erreur ou au moins me mettre sur la piste?

    Merci d’avance

  7. Bonjour je ne comprends pas pourquoi l’utilisation de « inherit » dans « texte-transformation ».
    Merci pour ce tuto instructif, je suis en train de le comprendre:
    la designation des li et des ul relativement aux parents est assez difficile à saisir pour moi, pour l’instant.
    Comment designer certains li, certains ul tout en les distinguant dans les evenements associés (hover, ou display inline-bloc) est une tache difficile: d’apres ce que je comprends c’est l’espace entre les noms des elements qui en fait des parents/enfant.C’est à dire que le ul qui suit l’id est differenciée de celui qui suit li par leur designation dans la description des styles via l’espace et la liste des parents.

  8. Salut,

    pour inherit c’est juste un choix de ma part parce que j’aime bien ce mot ^^
    Il veux dire « héritage » et pourtant il fait tout le contraire dans mon code…
    Tu peux lire cet article à ce propos :
    https://developer.mozilla.org/fr/docs/CSS/inherit
    Dans le cas de text-trasform, on pouvait tout simplement mettre « normal ».
    Je m’en sers également pour annuler le inline-block sur les li du sous menu.
    Là aussi on pouvait utiliser autre chose, à savoir « block » ou « item ».

    Pour parent/enfant c’est très simple : un enfant est à l’intérieur d’un parent.
    par exemple :
    <ul>
    <li>item</li>
    <li>item</li>
    </ul>
    <ul> est le parent direct des deux <li>

    Pas beaucoup d’espace ici pour développer mais si tu as d’autres interrogations n’hésites pas à me contacter sur le site du zéro.

  9. Bonjour,

    Merci pour ce blog fort utilie.

    Pourriez vous me dire comment faire pour que le menu déroulant n’apparaisse que lorsqu’on clic sur le bouton et non au survole.

    En effet, tel quel, le menu est difficilement utilisable sur les périphériques tactiles.

    Merci

    Cordialement,

  10. Salut nG,
    si tu teste mon menu horizontal sur tablettes ou smartphones tu verras qu’il fonctionne très bien ^^.
    Le truc c’est de ne pas mettre une url dans le href des liens du menu.
    Il faut repenser ta navigation si c’est le cas.
    En effet, si il y a une url de page tu es redirigé vers celle-ci et le sous menu ne s’ouvre pas.
    Contacte moi sur le site du zéro pour plus d’infos car il existe toutefois d’autres solutions. (avec focus ou même du JS).

  11. Bonjour, au début tu écris:
    « Pour cacher/montrer un sous menu la technique du display: none et display: block est souvent utilisée. Pour des raisons d’accessibilité et de référencement j’utilise une autre technique : »

    J’aimerais avoir des informations sur le pourquoi pour des raisons de référencement

    • Salut Nui,
      tout simplement parce que les moteurs de recherche ne référence pas du contenu caché avec display:none.
      Ce qui est embêtant pour des liens de menu.
      Pour l’accessibilité, les élément en display:none ne sont pas lus par les lecteurs d’écran utilisés par les personnes ayant des déficience visuels.

      • Si j’avais posé cette question, c’est parce qu’elle ma surprise. Et ta réponse est des plus logique aussi. Mais, je viens de tester à l’instant sur mon site car je voulais quand même en avoir le cœur net. Si tu tapes sur google « Parichat buys a lot of things. » (avec les guillemets) alors google te donnera mon site pour seule résultat. En cliquant sur le lien, tu ne trouveras pas cette phrase sur la page, et pour cause, tout le texte anglais est en display: none. Si tu cliques sur le drapeau anglais, elle apparaitras. Et donc, si je me pauses des questions, c’est pour la suite de mon site, car je voudrais faire des exercices basé sur le affiché/pas affiché…

        • Tiens ça me rappelle un sujet sur le site du zero qui a été déterré aujourd’hui ^^.
          Bon du coup, j’ai un peu cherché des infos parce que ça me titille aussi.
          Il en ressort d’après ce que j’ai lu ici ou là que si les éléments cachés doivent réapparaitre à un moment ou un autre, avec une action de l’utilisateur par exemple, google en tiens compte et le référence.
          On peut se demander comment… En parcourant la CSS ?
          Un peu de lecture (si tu lis l’anglais) avec des avis contraires :
          http://www.rankmyday.fr
          Donc difficile de se prononcer mais je dis peut-être des bêtises sur mon site ^^
          Par contre ça reste valable pour l’accessibilité.

  12. Excuse moi, pour le sujet déterré sur le site du zéro, Soluna est mon pseudo et Nui mon surnom. A force de chercher en français et en anglais, j’en déduit une chose, c’est que tous le monde en parle sauf google.. Google ne semble pas aimer communiquer sur ses algorithmes.

  13. Bonjour, il y a 2-3 ans j’ai utilisé le site du zéro pour réaliser pas mal de choses dont mon menu horizontal.
    C’est peut être à toi que je dois le tutoriel de l’époque.
    En tout cas je te remercie chaleureusement de cette démarche qui rend bien service aux néophytes !

  15. bon je viens de m’apercevoir que j’ai un peu m…. avec les liens dans mon post précédent 🙁
    Dommage qu’il n’y a pas bouton :Editer !!!!
    bon je vais supprimer les balises.

    très bien ce code 😉 que je teste ici http://j2m-06.pagesperso-orange.fr/p03_aw.html

    trois choses:
    1/ je ne suis pas arrivé à réduire la largeur des onglets !
    2/ augmenter la hauteur des sous-menus (limité à 6 sous-menus)
    3/pas arrivé non plus à créer des sous-sous menus décalés !!!
    merci pour votre aide
    J2m06

    ps:
    Je suis en train de faire des essais de menus déroulant.
    Voir http://j2m-06.pagesperso-orange.fr/p15_faq_tb.html
    ou http://j2m-06.pagesperso-orange.fr/faq_tb_editeur_config.html#acces_editeur_config
    ou http://j2m-06.pagesperso-orange.fr/p15_faq_tb_profil.html

    J2m06

  16. Bonjour à toi,
    Ce tuto est super intéressant.

    Malgré mes essais je n’arrive définitivement pas au résultat que je souhaiterais trouver !
    Voilà, je suis en train de faire un site avec Joomla 2.5, et le template MaxGaming TG.
    Je voudrais néanmoins changer la façon dont se déroule le sous-menu horizontal qui pour l’instant est en colonne verticale comme dans les différents exemples que tu donnes plus haut.

    En effet, j’aimerais beaucoup que le sous-menu s’ouvre avec la même largeur que la barre de menu, et les items en ligne, ou colonne plutôt qu’en liste, un peu comme sur ce site:
    http://www.auzoon.com/

    Voici le code css lié au menu concerné:
    Code:

    /* Navigation */
    #nav {}
    #navl {}
    #navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;margin-left:15px;margin-right:15px;}
    #nav {z-index:10; position:relative;}
    #nav-left { float:left; width:80%;}
    #nav-right { float:right; width:20%;}
    #nav ul {margin:0; padding:0; float:left;}
    #nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;}
    #nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:18px;font-weight:normal;}
    #nav ul li.active {}
    #nav ul li.active a {background:#ebebeb; repeat center; color:#ff6700;}
    #nav ul li:hover {}
    #nav ul li a:hover{ text-decoration:none; font-weight:normal; font-size:18px; background:#ebebeb; repeat center; color:#ff6700;}
    #nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
    #nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
    #nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
    #nav ul li ul li:hover ul {left:180px; top:0}
    #nav ul li:hover ul li a {text-shadow:none;}
    #nav ul li:hover ul li { background:none;}
    #nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}
    #nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:13px;text-shadow:none;}
    #nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
    #nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}

    J’ai essayé de bidouiller pas mal mais ne suis malheureusement pas assez douée pour trouver vraiment ce qui fonctionne !

    Est-ce que tu peux m’aider ?
    Merci d’avance…

  21. Bonjour
    Tout d’abord merci pour ce tuto indispensable pour les néophytes comme moi. C’est du bel ouvrage.
    Par contre que faire quand le nombre de sous menus est plus important.
    J’ai essayé de rajouté des lignes #menu-demo2 li:nth-child(3) en fonction du nombre souhaité et autant pour les background mais ça ne fonctionne pas.
    Comment faire stp ?
    (message perso sur openclassrooms
    Encore merci
    Cordialement

  23. Bonjour,

    Merci pour votre explication très claire sur le menu déroulant ! J’ai opté pour le second choix, plus esthétique. 🙂

    J’aimerais que le menu se déroule vers le haut et non pas vers le bas. J’ai fais pas mal d’essais infructueux, résultat je viens mendier votre aide. Pourriez vous nous indiquer comment procéder ? Je suppose par ailleurs que ce genre de manipulation pourrait intéresser les visiteurs de votre site, puis-je vous suggérer de l’intégrer à votre billet ?

    Bonne continuation,
    Paul.

    • Bonjour,

      tout d’abord merci pour ton commentaire.
      Pour ton souhait c’est faisable (mais pas facile…) mais il y a des contraintes.
      Déjà, bien évidemment, le menu ne peut pas être en haut de la page…
      Ensuite, puisque je me sers de max-height, le sous menu ne peut s’étirait que vers le bas.
      L’astuce c’est de déplacer le sous menu vers le haut avec un top négatif.
      Petit problème, il faut connaître la hauteur de chaque sous menu pour le déplacer d’autant vers le haut.
      Je ne sais si c’est très clair pour toi.
      Mais le défi est intéressant, je vais étudier la question et je te ferais part du résultat.
      Pendant ce temps continue tes essais, c’est comme ça qu’on apprends ^

      • Bonsoir,

        Je retourne au code en cette heure tardive.
        C’est vraiment très gentil de votre part de m’avoir mâché le travail. J’avais saisis vos indications, vous avez été très clair ! De les voir en plus appliquées, c’est encore mieux: Je vais étudier votre code et voir si je peux intégrer la logique pour la réutiliser en d’autres occasion.

        Je vous souhaite chaleureusement de rencontrer dans votre vie des personnes aussi pleines de sollicitude que vous !

        Bonne continuation,
        Paul.

  24. Je vais employer le même mot que toi parce que c’est le seul qui me vient à l’esprit.
    Je te remercie pour ton commentaire très chaleureux.
    J’ai la chance de faire le métier que j’aime et en plus, je peux le dire, c’est un métier ou le partage des connaissances est très important et naturel.
    C’est d’ailleurs la première règle du web et son essence.
    Donc je rencontre tous les jours des personnes comme moi, prêtes à partager et aider.
    Une forme d’empathie ^^
    Malgré tout, même si nous sommes des altruistes, des commentaires comme le tien sont une récompense.
    Alors je t’en remercie sincèrement.

  27. Salut je vien de découvrire ton code qui me plait beaucoup car je cherchais un code pour faire un menu deroulant. Toute fonctionne bien avec firefox cest #1 comme sur le tuto mais avec internet explorer 10 sur windows 8 le menu affiche mais quand on met la sourie sur les menu ya rien qui déroulle vers le bas comme dans firefox. Pourtant J’ai bien copier les code si tout fonctionne #1 dans firefox. J’imagine qui doit avoir quelque chose a modifier pour que sa fonctionne correctement mais je ne sais pas quoi changer. J’aurais donc besoin d’aide avec se problème svp.

    Merci

    • Salut Skates,
      c’est très étrange car IE10 est justement la version de IE qui interprète « transition ».
      Tu vas essayer deux choses.
      Commence pas rajouter -ms-transition: .8s all .3s après la ligne -webkit-transition: .8s all .3s
      Si ça ne fonctionne toujours pas, c’est que IE10 passe en mose compatibilité.
      il peut y avoir deux raisons à ça :
      – soit il y a quelque chose juste avant ton doctype, dans ce cas nettoies ton code,
      – soit tu est en local.
      Pour changer ça en local, quand tu es sur ta page dans IE appuies sur F12, en bas tu verras « mode navigateur » et « mode de document ».
      Il est possible que « mode de document » soit en mode quirks ou autre.
      Change le pour mettre IE10.
      A noter que c’est une chose qui arrive seulement en local. Sur internet ça ne le fera pas.
      Plus d’infos sur le mode quirks ici :
      http://www.lesintegristes.net
      http://www.alsacreations.com
      N’hésite pas à me recontacter si ça ne fonctionne toujours pas.

  28. Super tuto! J’ai enfin réussi à faire mon menu déroulant tout beau!
    Mais je rencontre quelques soucis (ben oui ça serait pas marrant sinon):
    – quand je veux rajouter des menus, impossible de leur attribuer des nouvelles couleurs. J’ai pourtant inséré de nouvelles lignes de codes ex:
    #menu-demo2 li:nth-child(5){
    #menu-demo2 li:nth-child(6){

    Mais rien ne change.

    – 2eme problème : je n’arrive pas à placer la barre de menu afin qu’elle soit bien centrée et pas sur deux lignes comme c’est le cas en ce moment.

    Peux-tu m’aider?
    Merci d’avance

  29. Bonjour,
    J’ai repris ton code, mais j’ai allongé la valeur d’un sous menu, par exemple à la place de « Lien sous menu 4 » j’ai mis « Lien sous menu 4444 »..
    Ca me met le texte sur 2 lignes, et j’aimerais que l’onglet du sous-menu en question s’allonge en fonction de son contenu.
    Comment faire ?

    • Salut Sylvain,
      je crois que tu ferais bien de reprendre entièrement ton menu…
      Il y a vraiment trop d’erreurs pour que je puisse réellement t’aider sans tout refaire.
      Je t’indique quand même deux choses, entre autres, qui empêche ton menu de fonctionner correctement.
      Tu as mis overflow: hidden sur .tabs .widget ul. Ton ul de menu (#menu-demo2) est comprise dans le lot. Donc ça ne peux pas afficher tes sous menus…
      Autre chose, tu as mis sur tes a de sous menu : padding: 800px 0, tu ne trouves pas que ça fait beaucoup ? ^^

  31. Bonsoir,

    Grâce a ton tutoriel j’ai réussi à coder mon premier menu déroulant visible sur mon site web. Par contre j’ai un petit problème qui apparait lors des zoom navigateur ctrl + +/-
    Mon menu se décale d’un léger pixel sur certain zoom et ça gâche un peu le résultat. J’aimerais régler ce problème mais j’avoue qu’après avoir bien cherché (ton tuto+ tous les autres sur le site du 0 concernant les menus) je n’ai pas trouvé de solution.
    Peut être pourrais-tu m’aider ?

    Si oui fait moi signe par email et je t’enverrais le code html et css du menu. Merci en tout cas !

  32. Bonjour et merci beaucoup pour ce tuto vraiment très bien expliqué
    J’ai voulu l’utiliser sur mon site pour que le déroulement soit plus fluide, mais malheureusement ça ne fonctionne pas. Il y a comme un bug 🙁
    Pourtant quand je recopie le code sur des feuilles indépendantes, en local tout marche très bien…
    Est ce que tu aurais une explication sur le comportement de mon menu ?
    Merci et bonne journée 🙂

    • J’ai trouvé ^^
      Dans ta CSS style.css tu as ce code :
      #header-menu ul.menu ul {
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
      display: none;
      float: left;
      left: 0;
      list-style: none outside none;
      margin: 0;
      position: absolute;
      top: 4.5rem;
      width: 188px;
      z-index: 99999;
      }
      Enlève le display:none

  33. Bonjour et MERCI 🙂

    effectivement il y avait un conflit entre mon template parent et celui que j’ai modifié (enfant) .
    Du coup, j’ai supprimé cette ligne dans le css du parent et maintenant tout fonctionne très bien.
    Merci beaucoup c’est vraiment très sympa d’avoir traité mon problème et y avoir passé du temps dessus .

    Bonne continuation !

    • Salut,

      le menu a un ID, et un ID doit être unique. Il ne doit pas y en avoir plusieurs avec le même nom.
      C’est peut-être ça la cause du problème.
      Si tu veux des menu identiques mets leur une classe avec le même nom, si tu veux les styler différemment mets leurs un ID différent.

  35. Bonjour,
    sur un site que je travaille, j’ai opté pour le premier menu H.
    Tout va bien, c’est le seul qui marche. J’en ai essayé d’autres mais à cause d’un slider et d’un entête centré (?) j’avais des problèmes de centrage du menu avec tous les autres.

    Là , j’aurais bien aimé avoir les séparations entre les éléments :
    « pour palier à un problème du display:inline-block. En effet, celui-ci génère un white-space entre les éléments » dis-tu…
    Bé chez moi, ça ne le fait pas, ou pas !
    Essais fait avec le Fox et IE11.
    D’où ça peut venir ?
    Faut dire que je ne suis pas codeur…

      • Salut,

        tout dépends de ce que tu entends par active.
        Si c’est au moment où tu clic effectivement c’est avec :active. Mais ça doit se faire sur la balise a, pas sur le li.
        Si c’est quand on est sur la page du lien, ça se fait en PHP ou javascript.
        très facile à faire avec Jquery par exemple.

          • Non, ce que je dis c’est que pour faire en sorte que le lien qui correspondant à la page en cours soit d’une couleur différente, il faut soit utiliser du PHP, soit le faire en JS. Et que cette fonction existe dans Jquery.
            En voici un exemple.
            Nul de besoin de tout ça pour le reste du menu.

    • Bonjour,
      effectivement pour l’instant je ne me suis pas du tout intéressé à une version responsive du menu.
      Je parle sur le site parce qu’au boulot c’est déjà fait ^^.
      Il faudra donc attendre que j’en trouve le temps si vous souhaitez utiliser ce menu.
      Mais la plupart du temps les menus ne restent pas en ligne sur les nouveaux support.
      Les liens passent plutôt les uns en dessous des autres, ou sont carrément cachés et apparaissent au clic.
      Quelques exemples :



      Vous pouvez aussi, si vous êtes à l’aise avec la CSS, coder un peu avec les media-queries pour changer quelques valeurs (padding des balises a, taille de font).

    • La réponse est plus ou moins la même.
      Quand j’ai mis ce menu en ligne nous n’étions pas encore tous des « geek » avec nos smartphones ^^
      Donc, comme le :hover ne fonctionne pas sur ces appareils…
      Les solutions les plus utilisées, entres autres, sont javascript et :focus.
      PS : tes questions me donne bien envie de me mettre au boulot et de pondre un menu responsive fonctionnant sur tous les supports ^^

      • salut
        Merci pour tes réponses
        je vais chercher sur d’autre tuto et surtout n’hésite pas à me contacter ou nous informer quand tu auras une solution .
        je débute dans cette univers , je suis positif car grâce à toi j’ai déjà une ébauche qui fonctionne.

        Bonne soirée

  40. Bonjour,

    J’ai un problème pourtant probablement très simple à régler mais je n’y arrive pas… J’ai un sous-menu qui se déroule lorsqu’on le survole, cependant il reste déroulé par la suite sans jamais remonter. Comment faire pour remédier à la situation?

    Merci d’avance!

  41. Bonjour,

    Je suis débutant dans le code HTML et j’utilise Blogger,je n’arrive pas à intégrer un menu déroulant à ma barre déjà existante « recettes » à quel ligne faut il intégrer le code je n’y arrive pas.
    Je ne veut mettre qu’une ligne pour le moment,ça à l’air simple mais j’ai fait copier coller un peu partout et ça ne marche pas.

    Merci d’avance,personne n’est en mesure de me répondre sur le communauté d’aide Blogger.

    A croire que c’est l’impossible.

  42. Bonjour et merci pour ce tuto très bien réalisé.
    Juste une petite question, j’ai reproduit ton code adapté à mes besoins.
    Dans ce nouveau menu, l’item deux cache un sous-menu de neuf autres items.
    Seuls les 7 premiers s’affichent ?!?!
    Si je ne lie pas mon code HTML au CSS les neufs liens sont bien présents –> pour moi c’est au niveau du CSS que quelque-chose bloque!
    Merci à l’avance pour ta réponse salvatrice.

    Et encore mille mercis pour ton tuto

  43. Salut, super le menu, mais j’ai un petit soucis, j’ai cherché la solution depuis plus de 5h , je ne l’a trouve pas, je veux ajouter deux boutons supplémentaires, je l’ai fait mais les couleurs n’apparaissent pas.
    Si tu peux me renseigner se serait sympa.
    Merci

  44. Bonjour
    je viens juste de me lancer dans la refonte du site de mon établissement, je me suis permis d’utiliser la barre de menu que vous proposer. J »aurai aimé rajouter des sous sous menus aux sous menus. Vous dites plus haut qu’il faut rajouter du code CSS. Mais lequel ???
    Merci pour votre réponse

    • Salut,
      un sous sous menu c’est rajouté une ul dans un li du sous menu.
      Ensuite évidemment il faut modifier la CSS en conséquences.
      En gros l’imbrication du html ça va être : ul > li > ul > li > ul > li
      Dans l’ordre : menu > lien du menu > sous menu > lien du sous menu > sous sous menu > lien du sous sous menu.
      Côté CSS il y a pas mal de modifs à faire.
      Je pourrait t’aider plus facilement sur openclassrooms.

  45. Bonsoir et merci pour ce tuto assez simple à comprendre!
    j’aide une copine a créer des menus déroulant pour son blog (overblog) en modifiant son HTML/CSS bref je suis parvenue a obtenir ce que je voulais mais le sous menu s’affiche horizontalement et non verticalement, j’ai bidouiller tout ce que j’ai pu, mais ça ne marche pas!!!! est ce que vous pouvez m’aider??
    merci et bonne soirée

  46. Bonjour

    D’abord merci pour ce tuto de menu déroulant super et pas très difficile a installer.
    Je viens de le mettre et le paramétrer a mon goût trop beau enfin moi j’aime bien.
    Juste une questions peut’on rallonger le temps en secondes pour le menu déroulant remonte moins vite?

    Merci encore

  47. Bonjour,
    enfin un menu déroulant sympa est facile à mettre en place. merci.
    J’ai personnalisé le tout, mais je souhaite rajouter un sous menu dans mon sous menu !
    Donc un 3e niveau ! J’ai placé ma balise …, entre les balises d’un sous menu. Mais je pense qu’il nous manque quelque chose en css ?? Quel code, et où ?
    Merci de votre aide.

  48. Hello,

    Cette technique me rappelle vaguement un truc que j’ai déjà lu sur deux autres sources dont un blog que je tiens.
    C’est flagrant mais peut-être est-ce juste un hasard 😉

    Je dis ça parce que les sources ne semblent pas toutes citées, ce qui est dommage pour la « traçabilité de la connaissance » et le partage.

    Bonne continuation,
    Geoffrey

    • Salut Geoffrey,
      si tu parles du max-height, c’est effectivement bien de chez toi que ça vient (mais ça vient plus ou moins de Léa Verou il me semble).
      J’avais d’ailleurs laissé un commentaire sur ton site, en indiquant que je l’utilisait plutôt sur les li que sur les ul.
      Commentaire auquel tu m’a répondu que c’était une solution mentionnée par Raphaêl Goetter. J’en était tout émoustillé d’avoir eu une idée proche ^^
      Pour le reste, je te cite dans la page ressources mais si tu le souhaites, et avec un extrême plaisir, je mentionne dans la page du menu : « Largement inspiré du tuto de Creativejuiz » avec le lien qui va bien.
      PS : à propos du max-height sur les li plutôt que sur ul, ça m’a permis de faire quelque chose qu’on me demande souvent, un menu vertical avec un deuxième niveau (oui, c’est pas bien…).
      Impossible normalement à faire avec le max-height et le overflow:hidden sur ul.
      Si ça t’intéresse…

  49. Bonjour,
    Je débute avec mon premier blog wordpress sur la plongée de nuit au bassin d’Arcachon. J’ai appliqué votre appli qui marche vraiment bien pour sélectionner les espèces rencontrées. En fait je l’ai modifiée un peu pour positionner deux menus horizontaux. Ca marche, j’ai juste un truc que je ne comprends pas bien, lorsque je suis sur le menu du dessus, si la liste déroulante touche le menu du dessous le titre de la liste du dessous occulte celle qui s’ouvre. Pas très grave, je les ai écartées assez, mais si vous avez un petit conseil, je serai ravi de résoudre ce petit soucis. En tous cas merci beaucoup pour ce tuto formidable.

    • salut,
      j’ai été visiter ton site et le menu semble fonctionner comme il faut.
      D’ailleurs je ne vois qu’un seul menu avec un seul sous menu sur « galerie photos ».
      Je ne suis pas au bon endroit ?
      Contacte moi sur openclassrooms pour me donner plus d’infos.
      PS : bien sympa ce template.

  50. Bonjour,

    Merci pour ce beau tuto compréhensif, mais je suis débutant en HTML5 et CS3. Cependant, je suis bloquer quelques part sur ce tuto dont je doit intégré ce code à mon fichier css et html.

    Mon problème est que, quand je l’associe à sur mon fichier CSS le resultat ne pas correct.

    Partie CSS du Menu:
    .box-shadow {box-shadow:0 1px 1px #fff}

    ul.menu {margin:0 1px 0 0; border-right:#7acad7 1px solid; display:inline-block; float:left}
    ul.menu li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#53b2c3 1px solid; border-left:#82ceda 1px solid}
    ul.menu li a {font-size:13px; line-height:17px; color:#fff; font-weight:bold; display:block; padding:23px 28px 24px 28px}
    ul.menu li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important}
    ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid}
    ul.menu li.home-page a {padding:21px 22px 24px 23px !important}
    ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}

    Partie HTML:


    Test
    Test 1
    Test 2
    Test 3
    Test 4

    Ma question est de savoir, comment l’intégré ici sans que mon ancien menu soit déformé.

    Merci de votre support précieux vous accorderez.

    RK

  51. Bonjour

    Merci pour votre tuto super claire est très bien fait.
    Je rencontre un problème tout ce que je met après le menu n’apparait pas, j’ai essayer plein de chose mais rien n’a fonctionner.
    Pourriez vous me dire comment faire ?
    Le menu est sur une page a part, dans les pages du site j’utilise la fonction include, cela fonctionne, mais après tout ce que je met n’apparait pas .

    • Et bien…
      Je te conseille fortement de lire le tuto html/css sur openclassroom.
      Ton code est plein d’erreurs notamment le fait qu’on utilise plus les tables pour faire de la mise en page depuis une bonne dizaine d’années.
      Et encore moins des attributs comme bgcolor qui sont obsolètes et dépréciés.
      Pour ton problème c’est parce que tu as oublié de mettre </style> à la fin de la CSS du menu. Style qui devrait être dans la balise head.

    • Bonjour,

      ce menu n’est pas fait pour.
      Bien que ça puisse fonctionner si le menu est en top de la fenêtre et que les liens du menu principal ne pointe vers rien ou vers l’id du menu.
      L’as tu testé dans Ipad ?
      Autrement on peut utiliser :focus à la place de :hover.

  56. Bonjour,
    Avec un copain, on s’est fait notre propre site avec e-monsite, mais maintenant, nous voulons créer notre site avec du code (pour améliorer nos compétences).
    Nous faisons donc un menu déroulant, et votre tuto est super, mais nous n’arrivons pas à combiner le menu déroulant vertical et horizontal…
    C’est-à-dire que dans le lien sous menu 1, nous voulons faire apparaître des liens sou-sous menu 1…
    Quelqu’un pourrait-il nous aider ???
    Merci

  57. Salut FrogWeb!

    Merci pour ton tuto qui m’a bien aidé!!
    Dis-moi, j’ai essayé de rajouter plus de sous-menus dans mon menus et au bout du 5 ou 6ème liens il disparaît :(…
    VOilà l’adresse de mon site: http://tecfa.unige.ch/proj/penser_education/A_integration.html
    Ca bug quand je suis dans le menu « Penser l’éducation »…
    J’arrive pas trop à voir ce qu’il faut que je rajoute pour que ça fonctionne…
    Aurais-tu une solution?

    Merci d’avance!

  58. Je viens juste ici vous faire part de l’aventure du menu déroulant.
    Je cherchais un menu déroulant pour un de mes sites.
    Hésitant dans la création du menu, je suis tomber sur ce tuto.
    Après une multitude de modif, j’ai pris contact avec FrogWeb via OpenClassRoom.
    Franchement ravi, si l’inscription est obligatoire sur OpenClassRomm, c’est très rapide.
    Aussi rapide que la réponse de FrogWeb en message privé, sincèrement il m’a guidé pas à pas et gratuitement, c’est le don de sois, un don qui est rare de nos jours.
    Non seulement il m’a aidé mais en plus, j’étais assez précis dans ma recherche de menu.
    Telle une commande de CSS, FrogWeb Top Class, un grand merci à FrogWeb, sans quoi j’aurais du sortir la boîte d’aspirine.
    Je ne suis ni son ami ni la pour faire sa pub, mais il faut laisser à César ce qui est à César.
    Encore merci à toi.

    • Je vais rougir ^^
      Le partage des connaissances et de l’information c’est l’esprit même du web, donc le faire bénévolement, comme beaucoup d’autres, me semble naturel.
      Notre récompense ce sont des messages comme le tien ^^

  59. Bonjour et merci pour les solutions proposées.
    J’ai créé il y a longtemps le site Internet de notre club et j’aimerais rajouter un menu déroulant.
    Le soucis est que ma page d’accueil est composée de cadre et que lorsque le menu se déroule il est derrière la page se trouvant dans le cadre situé en dessous du cadre sommaire. Y-aurait-il une solution pour que cela se déroule devant ?
    Merci d’avance,
    Fred

  63. Bonjour, merci déja pour ton site qui est bien pratique.
    Je suis actuellement en train de modifier un thème sur blogger, j’ai un soucis avec le menu déroulant déjà présent. en fait le menu déroulant s’active bien mais il faut être super rapide pour aller sur les sous menu car ils disparaissent quasi instantanément. sais-tu quelle valeur je dois modifié ? j’ai changé le .3s en .8s sur ces lignes mais rien n’y change.
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;

    ils mettent juste un peu plus de temps a disparaitrent une fois qu’on a réussi a aller dessus

  64. Bonjour, bonsoir,

    Désolé de te déranger à nouveau mais j’ai encore un soucis. J’ai utilisé ton menu déroulant car je suis en train de créer mon propre thème (marre des trucs crypté) et ton menu déroulant est le seul que j’ai réussi a insérer qui reste centré ^^. J’y est apporté quelques modifications mais le soucis et que les sous menus ne sont pas accessible sauf le premier car il déborde probablement de la div ou il se trouve. Existe-t-il une commande pour faire en sorte que même ce qui sort de la zone soit tout de même cliquable, sans avoir un ecart blanc de fou entre mon menu et l’article.
    Par avance merci encore

    Le blog : http://cerisettetest.blogspot.fr/

  65. Bonsoir .. svp : lorsque j’insère un lien pour le » lien sous menu » il m’amène vers un lien externe (une autre page) … j’ai besoin que lorsque je clique sur le » lien sous menu » il change L’URL dans la même page .. comment faire !? et mercii 🙂

    • Salut,

      peut-être y a t-il dans le lien target= »_blank ».
      Maintenant si ce n’est pas le cas ce que tu cherche à obtenir ne se fait pas seulement avec html et CSS.
      Il faut passer par un langage serveur comme le PHP, avec lequel tu peux faire des includes.

    • Salut,
      en dehors des codes présents sur le site je ne donne pas d’aide.
      Déjà parce que ce n’est pas pratique ici et en plus je n’en finirait pas ^^
      Je t’invite à poster ton problème dans le forum html/css de openclassrooms.
      Si ce n’est moi tu trouvera toujours quelqu’un pour te répondre.

  70. chers amis dévellopeurs
    J’ai un petit problème c’est pourquoi je solicite votre aide. Voilà, je suis entrain de faire un simple site web avec deramweaver8 je souhaite y introduire un champ qui permetra à l’utilisateur d’effectuer une recherche dans les differentes pages de mon site, le probleme est que je ne sais comment m’y prendre est-ce que cette option necessite obligatoire ment une base de donnée ?
    Notons que c’est un site web static
    , une fois que l’utilisateur entre un mot de recherche dans le champ approprié et valide efectu une recherche dans toutes les pages de mon site
    J’espere que j’ai été assé explication , je suis débutant en html vous l’aurez certainement compris !
    Merci d’avance

    • Alors ok là je peux t’aider directement.
      Et ça ne va pas t’arranger si ton site est statique ^^
      Effectivement il faut obligatoirement une base de données pour faire un moteur de recherche sur son site.
      Et de plus ça se fait avec un langage serveur comme le PHP.
      Toutefois il existe d’autres solutions mais je n’ai jamais essayé.
      Quelque chose qui peut peut-être te convenir :
      Moteur de recherche google

  71. Bonjour,
    j’ai essayé ton code cela fonctionne très bien mais je voudrais ajouter des sous-menus et je suis bloqué je peux pas ajouter plus de 7 sous-menus…je pense que je passe à côté de quelque chose mais je ne sais pas quoi?
    Merci d’avance pour ta .

  72. bonjour

    j’ai adapté ton menu déroulant super extra sur mon site.
    personnellement, je le trouve parfait puisque non pro je suis arrivée à ce qu’il soit fonctionnelle…

    je ne l’ai pas fait pour les tablettes ou autres support de mobile, mais on ne peut pas empêcher l’évolution.

    en fait, si je laisse un message, hormis mes félicitations pour ce tuto, c’est que si on clique sur le nom du menu, par réflexe, sans lui laisser le temps de se dérouler, on remonte directement en haut de la page.

    sur un forum, j’ai posé ma question et on m’a répondue :
    normal puisque Activités Sportives
    1/ Il s’agit d’un lien
    2/ la cible est « # » qui est une ancre, vide ici.
    Donc le lien, en cliquant dessus, va mener en haut de la page.

    d’accord, mais que devrais-je mettre pour ne pas que l’on remonte en haut de la page.
    de plus, je l’ai testé sur cette même page, sur ton menu déroulant, et on remonte bien en haut de la page..

    merci

    • Salut,

      si j’ai bien compris ton soucis vient de l’utilisation sur tablette.
      Effectivement, puisque l’appui sur le lien du menu est en quelque sorte comme un clic et que le href est un #, on remonte en haut de la page.
      Il suffit d’enlever le # dans le href.
      Mais au cas où, il ya une petite astuce pour éviter le scroll.
      Dans le code html, juste après body par exemple, en tout cas avant le menu, tu mets un span vide ayant pour id « none » (c’est un exemple aussi, tu peux mettre le nom que tu veux).
      Ensuite, dans les href, au lieu de mettre un simple #, tu mets #none.
      Ceci fait, direction la CSS.
      Dans celle-ci tu rajoutes ce code :
      #none {display:none}
      Si tout se passe bien, le span étant devenu la cible des liens mais surtout étant caché, il n’y aura aucun scroll…
      Si ça ne fonctionne pas, contacte moi sur openclassrooms. Mais normalement c’est bon.

      Au cas où ton problème serait sur PC, normalement les liens du menu devrait pointer vers une page.
      Sinon il faut revoir le menu en enlevant tout simplement les a dans les onglets du menu.
      le coup du span fonctionnerait tout aussi bien mais il n’y a pas d’utilité de laisser un avec un #.

  73. bonjour

    merci.
    tu es trop fort !

    question = réponse = j’adore… surtout quand je comprends les explications de suite… (je m’aime…)

    bon, ça fonctionne sur pc.
    sur mobile téléphone (je n’ai pas de tablette) ce n’est pas au point dans le fait qu’il faut rester le doigt un peu plus longtemps, mais bon…
    si vraiment « mes » adhérents du club me chipotent sur ce point qui pour moi est un détail, je reviendrai vers toi sur openclassrooms.

    en attendant grand MERCI.

  75. Bonjour!

    Je reviens sur un commentaire qu’avait posté Paul (numéro 23) pour faire un menu déroulant… mais vers le haut !
    Le menu se situe en bas de ma page, et j’ai réussi à faire s’afficher les éléments de mon menu vers le haut avec plusieurs techniques (translate(x,x), position relative top -x px …). Le seul problème c’est que lorsque je réalise l’action (onclick ou hover) sur mon menu, il affiche bien les éléments vers le haut mais étend ma page vers le bas comme s’il gardait en mémoire la position initiale des éléments de la liste ! Et c’est ben moche !

    J’espère que c’est à peu près clair et te remercie d’avance pour ton aide; tu fais du beau boulot, continue! 🙂

    • Salut,

      je n’ai jamais essaye de le faire avec translate mais effectivement il est bien possible que la positon iniatiale perturbe le focntionnement.
      Il y a peut-être une solution avec overflow:hidden sur le parent, sur les li du menu donc.
      C’est à tester, tout dépends du reste du code.
      Si tu veux me donner le lien de la page ou le code pour que je regarde, tu peux le faire sur OCR.
      Et si on ne trouve pas il faudra cherche une autre façon de faire…
      J’ai supprimé la page sur laquelle j’avais fait le menu mais je peux le refaire sans problème.

      • Merci de ton aide,

        Je n’avais pas vu ton post, d’où mon temps de réponse !
        Ma page n’est pas en ligne donc je n’ai pas de lien à te passer; il faudrait que je t’envoie les fichiers sources. Celle-ci contient plusieurs « .php » et du javascript; peut-être est-il plus simple que je t’envoie le tout en .rar par mail ?

    • Salut,
      le fait qu’il soit en haut ne dépend pas du code du menu.
      C’est en fonction de ta structure html, par exemple si il y a des éléments avant.
      Tu veux faire une page avec seulement le menu centré, ou bien il y a d’autres choses dans ta page ?

  78. Bonjour, j’ai repris ce menu déroulant pour faire un site et je dois l’expliquer.
    Je cherche de l’aide pour comprendre dans le CSS a quoi ça correspond lorsque l’ont met : ul , ul li , li , a , li (…..) li, li (…) ul a côté du menu demo.
    Et quelle est la ligne qui fait que le menu se déroule au survol de la souris ?
    Merci beaucoup à celui qui pourra m’aider.

    • Salut,
      #menu ul ça veut dire « cible les éléments ul enfant de #menu ». C’est pareil pour les autres.
      Par exemple #menu ul li a va cibler les a qui sont dans des li qui sont dans des ul qui sont dans un élément qui à comme ID menu.
      C’est le classique parent/enfant.
      Ce qui fait dérouler le menu c’est la propriété max-height.
      A l’état normal il est à 0 et couplé avec overflow:hidden, le sous menu n’a donc pas de hauteur et son contenu qui pourrait dépasser est caché.
      Et au survol de son parent qui est un li, le max-height passe à 15em. Donc son contenu redevient visible.

  79. Ok merci beaucoup, donc quand il y a seulement li li ça cible les li dans les li j’ai compris mais pourquoi il n’y a pas toujours de ul avant car dans le html le menu commence par un ul ?
    Mais en fait à quoi correspondent les ul , les li, les a ?
    ul seul c’est le tout, li seul c’est tous les onglets principaux, a les textes , ul li les onglets du sous menu, ul li a les textes des onglets du sous-menu ? En quoi le li ul est différent du ul li ?
    Et quelle est la différence entre ces deux lignes à quoi sert le fait de mettre 2 fois menu-demo2 ?
    #menu-demo2, #menu-demo2 ul{
    #menu-demo2 ul{
    Merci beaucoup de ton aide !

  83. Bonjour
    Je novice en HTML ET CCS comment faire pour mettre le code html et ccs pour obtenir les menus déroulant ceux qui sont en couleur faut il mettre le code CSS dans le html ou autre
    moi ca donne des liste a la suite en dessous des autres
    merci

  84. Bonjour j’ai pris pour exemple les listes du sur le blog de CreativeJuiz de Geoffroy Crofte.
    Mais on peut mettre que 7 sous listes et la 7 est coupé ligne level 2.7
    peut t’on mettre plus de sous liste voici le code récupérer


    <!–
    DropDown Menu with CSS3 Transition and max-height – Creative
    Juiz

    li,
    #menu > li li {
    position: relative;
    display:inline-block;
    list-style: none;
    width: 110px;
    padding: 6px 15px;
    text-align: left;
    background-color: #777;
    background-image: -webkit-linear-gradient(#aaa, #888 50%, #777 50%,#999);
    background-image: -moz-linear-gradient(#aaa, #888 50%, #777 50%,#999);
    background-image: -ms-linear-gradient(#aaa, #888 50%, #777 50%,#999);
    background-image: -o-linear-gradient(#aaa, #888 50%, #777 50%,#999);
    background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
    }
    #menu > li { zoom:1;}
    #menu > li li { background: transparent none; }
    #menu > li li a { color: #444; }
    #menu > li li:hover { background:#eee; }
    #menu > li:first-child {
    border-right: 1px solid #777;
    -webkit-border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
    }
    #menu>li + li {
    border-left: 1px solid #aaa;
    border-right: 1px solid #777;
    }
    #menu>li:last-child {
    border-right:0;
    border-left: 1px solid #aaa;
    -webkit-border-radius: 0 8px 8px 0 ;
    -moz-border-radius: 0 8px 8px 0 ;
    border-radius: 0 8px 8px 0 ;
    }
    #menu ul {
    position: absolute;
    top: 1.95em; left:0;
    max-height:0em;
    margin:0; padding:0;
    background-color:#ddd;
    background-image: -webkit-linear-gradient(#fff,#ddd);
    background-image: -moz-linear-gradient(#fff,#ddd);
    background-image: -ms-linear-gradient(#fff,#ddd);
    background-image: -o-linear-gradient(#fff,#ddd);
    background-image: linear-gradient(#fff,#ddd);
    overflow:hidden;
    -webkit-transition: 1s max-height 0.3s;
    -moz-transition: 1s max-height 0.3s;
    -ms-transition: 1s max-height 0.3s;
    -o-transition: 1s max-height 0.3s;
    transition: 1s max-height 0.3s;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    }
    #menu>li:hover {
    background-color: #999;
    background-image: -webkit-linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
    background-image: -moz-linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
    background-image: -ms-linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
    background-image: -o-linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
    background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
    }
    #menu>li:hover ul {
    /* need an adaptation, lower is better, but see it large 😉 */
    max-height:13em;
    }
    p {
    text-align: center;
    margin-top: 6em;
    }
    .ie7 #menu > li {
    display: inline;
    zoom:1;
    }
    –>

    DropDown Menu with CSS3 Transition and max-height

    Menu
    1

    Level
    1.1
    Level
    1.2
    Menu
    2

    Level
    2.1
    Level
    2.2
    Level
    2.3
    Level
    2.4
    Level
    2.5
    Level
    2.6
    Level
    2.7
    Level
    2.8
    Level
    2.9
    Level
    2.7
    Menu
    3

    Level
    3.1
    Level
    3.2
    Level
    3.3
    Back to the articleSee also demo
    in dabblet     for live edit

    var _gaq = _gaq || [];
    _gaq.push([‘_setAccount’, ‘UA-8397602-5’]);
    _gaq.push([‘_trackPageview’]);
    _gaq.push([‘_setDomainName’, ‘.creativejuiz.fr’]);

    (function() {
    var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
    ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
    })();

  86. Re
    J’ai supprimer cette ligne /* need an adaptation, lower is better, but see it large 😉 */
    rien de changer
    #menu>li:hover ul {
    /* need an adaptation, lower is better, but see it large 😉 */
    max-height:13em;

  88. Bonjour,

    Je ne sais pas pourquoi mais je bloque toujours pour faire un menu déroulant en CSS3.

    Et pourtant c’est simple. Et c’est encore plus clair avec les explications que vous donnez.

    Merci, c’est bien utile pour un de mes sites que je mets à jour.

    • Salut,
      tout se passe après le commentaire « background des liens menus ».
      Au départ c’est fait pour 4 liens donc si on en rajoutes un ça ne marche plus.
      Il faut que tu rajoutes du code CCS en te basant sur ce qu’il y a déjà.
      Par exemple il va falloir rajouter entre le bloc #menu-demo2 li:nth-child(3) et le bloc #menu-demo2 li:last-child, un nouveau bloc CSS avec cette ligne : #menu-demo2 li:nth-child(4).
      Ensuite il suffit de mettre les mêmes lignes que les autres blocs et bien sûr choisir des nouvelles couleurs.
      Ton site est-il en ligne ?
      Sinon, si tu ne t’en sors pas, tu peux me contacter sur openclassrooms.

    • Salut Francis,
      je vais te répondre en 3 points. je commence par les deux plus simples ^^
      – sur cette même page où tu as mis ton commentaire, tout en haut, il y a un lien pour un menu déroulant 2 niveaux ^^
      – Le faire à partir du menu déroulant 1 niveau que je propose demande beaucoup de changement dans la CSS
      – Un menu déroulant, au-delà d’un niveau, est à la limite de l’ergonomie et de accessibilité

  92. Bonjour,
    Merci pour ta réponse, je pensais que l’on pouvais sans trop de difficultés ajouter un sous menu. Mon site est en ligne, ( c’est un site sur l’ aéromodélisme ) comment te contacter sur openclassroms.
    D’avance merci.
    Francis.

  96. Bonjour,

    J’ai copié votre code2 (menu coloré) pour effectuer des sous menus, j’ai test en local sans code derrière et ça fonctionnait, ensuite j’ai testé en important le menu dans mon code, et là je pensais que ça ne fonctionnait pas car je ne voyais pas le sous menus, mais en fait, j’ai remarqué que les sous menus se cache derrière le code, je veux dire que par exemple y’a une image, et le sous menu va pas aller par dessous mais va se mettre en arrière plan, comment corriger ce problème ?

    Merci d’avance.

  98. Bonjour cher FrogWeb !

    Ton tuto est excellent, malheureusement je suis extrêmement mauvais.

    Je viens de passer la journée à refaire un mixe entre le tuto avec 1 niveau de sous menu et celui de 2 niveau de sous menus. Malheureusement, sur mon blog (test) ça ne marche pas comme ici… Le 2ème sous-niveau est caché et ne veux jamais apparaître à droite du 1er sous menu (comme fait le tient, en gris). Il reste forcément dans le bloc du 1er sous menu, soit dessus, sois dessous, sois à côté mais pas affiché. Comment le faire afficher sur le coté ?
    (J’ai ajouter z-index: 1000 pourtant!)
    Encore merci néanmoins pour le tuto on ne peut plus clair !
    Bonne journée

      • Merci beaucoup de ta réponse extrêmement rapide ! Mon menu à progresser depuis que j’ai fait des tests avec le tient ! 🙂 ça fait réfléchir …
        Je trouve tout de même le css et html extrêmement compliqué, même moi qui est habitué a travailler avec des codes scientifiques pfiou ça me dépasse ^^
        Peut-être que si j’avais fait mon blog ailleurs que sur blogger, ça aurait été moins chiant aussi, bref.
        Bravo 😉

  99. Bonjour,
    merci pour ce tuto clair et bien pratique pour les débutants. J’utilise ce code depuis un moment pour mes sites, mais je viens de me rendre compte que l’attribut :hover ne fonctionne pas sur Ipad, Ipod, Iphone.
    Apparemment, le JS reste la seule solution fiable pour un menu compatible pour tous appareils.
    Avez-vous rencontrez ce problème ?

    • Salut,
      on peut faire au clic sans JS avec un input ou un :target mais le JS reste le plus facile à utiliser.
      Reste le problème du conflit entre le :hover et le clic.
      Il faut que le sous menu puisse se dérouler au :hover sur écran large te au clic en JS sur smartphone et tablette.
      Je me suis penché sur le problème et j’ai fait un menu ici qui fonctionne de cette manière, il passe au clic à 1024px (ipad en paysage).
      Mais je ne pense pas que ça soit fiable pour les tablettes avec une plus grande résolution.
      Ou alors il faudrait encore rajouter une couche JS pour détecter plus surement si c’est une tablette.
      Je continue les recherches ^^
      Une alternative, et c’est le cas de mon menu, c’est de repenser le menu et faire en sorte que les liens de premier niveau ne pointent vers rien.
      Il n’y a donc pas de rechargement de la page et le sous menu reste ouvert avec un :hover.

  100. J’ai confectionné un menu à deux niveaux qui fonctionne. Je veux ralentir l’ouverture de ces menus au passage de la souris. Pas de problème lorsque j’ai fait des essais sur un seul niveau, mais dans ce cas-là le second niveau refuse de s’ouvrir. Si tous mes niveaux fonctionnent alors là la transition ne se fait pas. comment appliquer la transition aux deux niveaux?

    Merci

      • #nav {margin:0;padding: 7px 6px 0;background:#450305;
        font: normal .9em/1.5em Arial, Helvetica, sans-serif;
        width: 960px;margin: auto;color: #666;
        border-radius: 0em;
        -webkit-border-radius: 0em;/*arrondi angles fond*/
        -moz-border-radius: 0em;
        }

        #nav li {width:188px;margin: 2px ;padding: 0 0 8px;float: left;position: relative;list-style: none;}

        /* main level link */
        #nav a {font-weight:Bold;color:#ffe27d/*jaune*/;text-decoration: none;display: block;padding: 8px 20px;margin: auto;/* arrondi des angles des menus*/
        -webkit-border-radius: 0em;
        -moz-border-radius: 0em;
        }

        #nav a:hover {background: #000 /*noir*/;color: #fff/*blanc*/;}

        /* main level link hover */
        #nav .current a, #nav li:hover > a {background:#FC3/*jaune*/ ;color:#000;border-top: solid 1px #f8f8f8/*jaune*/;

        }

        /* sub levels link hover */
        #nav ul li:hover a, #nav li:hover li a {background: #450305/*rouge très foncé*/;border: none;color: #ffe27d /*gris pale*/; }

        #nav ul a:hover {background:#fc3 url(../images/gradient.png) repeat-x 0 -100px !important;
        color: #000 !important;
        -webkit-border-radius: 0;
        -moz-border-radius:0;
        }

        #nav > ul >a{
        position:absolute;
        z-index: 1000;
        max-height:0;
        left: 0;
        right: 0;
        overflow:hidden;
        -moz-transition: .8s all .3s;
        -webkit-transition: .8s all .3s;
        transition: .8s all .3s;
        }
        #nav li:hover ul {
        max-height:150em;}

        /* dropdown*/
        #nav li:hover > ul {display: block;
        }

        /* level 2 list */
        #nav ul {display: none;margin: 0;padding: 0;width: 188px;position: absolute;top: 35px;left: 0;
        background: #ffe27d url(../images/gradient.png) repeat-x 0 0;
        border: solid 0px #b4b4b4;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: 0 0px 0px rgba(0,0,0, .3);
        -moz-box-shadow: 0 0px 0px rgba(0,0,0, .3);
        box-shadow: 0 1px 0px rgba(0,0,0, .3);}

        #nav ul li {float: none;margin: 0;padding: 0;}

        #nav ul a {font-weight: bold;text-shadow: 0 0px 0 #f;}

        /* level 3+ list */
        #nav ul ul {left: 188px;top: 20px;}

        /* rounded corners of first and last link */
        #nav ul li:first-child > a {
        -webkit-border-top-left-radius:0px;
        -moz-border-radius-topleft:0px;

        -webkit-border-top-right-radius:0px;
        -moz-border-radius-topright:0px;}

        #nav ul li:last-child > a {
        -webkit-border-bottom-left-radius:0px;
        -moz-border-radius-bottomleft: 0px;

        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
        }

        /* clearfix */
        #nav:after {content: « . »;display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
        #nav {display: inline-block;}
        html[xmlns] #nav {display: block;}
        * html #nav {height: 1%;}

  102. Hello,
    J’ai mis sur mon site, le menu 2 « un peu plus sexy que le premier » j’en suis très contente, je vous en remercie.
    Maintenant je cherche a l’améliorer, je voudrai rajouter des sous sous menu. Je cherche depuis 2 heures et je n’y arrive pas !
    Si vous aviez un peu de temps pour m’expliquer, ça serai sympa.
    Merci.

  104. Hello Frog, je vous remercie ça m’aide un peu mieux à comprendre.
    C’est un bon début.
    Je vais éclairer davantage votre lanterne.
    La largeur de la barre noire de navigation c’est 980px, sa hauteur 40 px.
    Il y a cinq titres principaux WEB | PRESTATIONS | FORMATION | ASSISTANCE | A PROPOS

    Il y a 5 sous-titres pour WEB : 1 – Site (hover survol couleur #EBAD00) – 2 Blog (hover survol couleur #47BEBC) – 3 Bannière (hover survol couleur #8A8800) 4 Ebook (hover survol couleur #E85476) – 5 Template (hover couleur survol #009870).

    Quand on survole WEB on est en #009870.
    Quand on survole PRESTATIONS on est en #47BEBC
    Quand on survole FORMATION on est en #8A8800
    Quand on survole ASSISTANCE on est en #E85476)
    Quand on survole A PROPOS on est en #009870

    C’est un résumé, mais si vous désirez que je vous explique en détail je le peux.
    Je ne veux pas prendre de votre temps mais j’aimerai me débrouiller seul, j’ai juste du mal à comprendre la différence entre l’exemple avec les first-child et nth-child, avec la balise ul et son id et la balise nav (exemple que vous m’avez fait).

    C’est un peu compliqué pour moi, mais je pense que c’est une question d’habitude, faut juste mettre les mains dans le cambouis et après ça va mieux.

    Encore merci.
    Cordialement.
    Richard

  105. Mon but n’est pas de te faire le menu, surtout en ce moment j’ai pas mal de boulot.
    Il va falloir que tu débrouilles avec ce que je t’ai donné.
    Tu as le mécanisme, le reste c’est que de la déco.
    Dans l’exemple que je t’ai fais je n’ai rien mis mais j’aurais pu utiliser aussi bien des first-child (et compagnie) que des classes.
    Je te conseilles de partir sur de classes si tu as du mal à comprendre l’utilisation des nth-child.

  106. Bonsoir, tout d’abord merci beaucoup pour ce tuto super intéressant.
    Je débute en html / css et j’ai une question. Je souhaiterai que lorsque l’on passe la souris sur le menu, il s’ouvre mais pas seulement sous la colonne. Qu’il prenne au moins la moitié de la page (autant en longueur qu’en largeur). As tu une idée ? Merci d’avance.

    Sliterr

      • Oui c’est à peu prés ça. En fait je vais t’expliqué ce que j’aimerai faire.
        J’aimerai réussir à faire une barre de menu (c’est pour un site de présentation d’une série de livre). Lorsque l’on passe la souris sur un onglet de ce menu par exemple « les livres » le menu se déroulerait et on verrait les couvertures (en miniature) des différents livres. Si l’on veut voir le résumé du livre, il faudrait juste cliquer sur l’image de la couverture et ça redirigerait vers la page du livre en question.
        Du coup pourrait tu m’expliqué comment agrandir/modifier la fenêtre qui se déroule afin que je ne t’embête pas plus et que je réussisse à le faire seul (ou si tu as le temps me faire un code) ?. Si tu le souhaites on peut se contacter par mail.

        Merci d’avance

        • Avec les exemples que je t’ai mis en lien il suffit normalement de mettre les images dans les balises a.
          Mais ça peut dépendre aussi de la façon dont tu as intégré le menu dans ton site.
          Le plus, si il est en ligne, c’est de me donner le lien du site.
          Sinon tu peux me contacter sur Openclassrooms (tu as les infos sur ma page d’accueil), ça sera plus simple que par mail.

          • Merci beaucoup. Je vais voir ce que je peux faire, et si je n’y arrive pas je te contacterais sur OpenClassrooms. Encore merci ;).

            Sliterr

  107. Bonjour et bravo, je suis encore novice et merci pour toutes tes explications et surtout ton menu déroulant que je trouve super bien. Je voudrai y intégrer pour certains onglets des sous sous menu qui s’ouvriront vers la droite mais je n y arrive pas du tout j’ en perds la tête. je débute en html. j ai fait différents tests pour trouver le code css mais je n’y arrive pas, Peux tu m’aider. MERCI

  108. Merci pour ta réponse rapide, je l’avais vu
    je pense que c ‘est le code qui donne l’ouverture du sous sous menu sur la droite mais je n’arrive pas a l’intégrer dans ton menu coloré.
    #menu ul ul {
    left:100%;
    top:0;
    overflow: hidden;
    max-width: 0;
    min-width: 0;
    transition: 0.3s all;
    y a t il quelques choses d’autres a rajouter?

    • Ah effectivement si tu cherches à l’intégrer au menu coloré ça va être un peu plus compliqué ^^
      Déjà l’id du menu n’est pas le même, donc avec le code #menu ul ul ça ne peut pas fonctionner puisque le coloré a comme id : #menu-demo2.
      Mais de changer l’id ça ne suffira pas. Il y a d’autres modifs à faire dans la CSS.
      Les mettre ici ça ne serait pas pratique, je te propose de me contacter sur openclassrooms et de me donner ton code.
      Je regardais comment adapter les deux menus.

  110. Bonjour,

    Super script j’adore.
    J’ai toutefois une question.
    Est on limité dans le nombre de liens de sous-menu ?
    Visiblement je n’arrive pas a en afficher plus de 5 (je parle des liens dans le menu déroulant pour chaque onglet, pas du nombre d’onglets)
    Merci pour ce beau travail

    Michel

    • Salut,
      c’est tout simplement parce que ton menu est en flash et que les tablettes et smartphones n’utilise pas cette techno.
      Pour Chrome je pense que l’add-on pour lire le flash n’est pas installé.
      Fais un menu en html/css et tout ira bien.

  114. Bonjour Frogweb
    juste une petite question
    Avez vous reçu mon sendbox?
    Pour la partie 1 de ma question: afin de fixer une longueur standard pour les sous sous menus j’ai réussi mais je ne suis pas satisfait de ce résultat on laisse tomber.
    Par contre la partie 2: afin de faire que le site soit pareil sous IE9 je n’y suis pas arrivé.
    Merci

    • Salut,

      Quelle version de IE ?
      le menu fonctionne à partir de la version 10 de IE.
      Pour les versions 8 et 9, l’animation et les background dégradés ne fonctionnent pas.
      Mais les sous menus s’ouvrent quand même.

      • J’ai la version 8 d’IE, et le menu est totalement bugué, la couleur ne s’affiche pas et je ne peux que accéder qu’au premier menu, après quand je veux aller dans les sous menus du deuxième, le menu se renroule…

        • Salut,
          effectivement aucune chance que ça fonctionne dans IE8.
          Une raison particulière d’utiliser cette vieille version de IE, plus mise à jour et donc non sécurisée ?
          Un intranet ?
          Autrement je te conseille de mettre à jour IE et de ne plus développer pour IE8 voir IE9.

  116. Bonjour … Génial ce tuto … enfin un (très beau) menu qui fonctionne sans js. Bravo !
    J’ai adapté pour avoir plus de 4 item en menu principal et tout fonctionne bien.
    Sauf un tout petit truc pour lequel vous avez peut-être une solution :
    UNIQUEMENT SOUS IE (11 et le nouvel EDGE) il y a un minuscule écart entre le last-child d’un sous-menu et les éléments au dessus (quand il y en plus de 2).
    Lorsque je supprime le border-radius du last-child (comme ci-dessous), le phénomène disparaît … mais c’est moins beau bien sûr … Une idée ???
    #menu-demo2 ul li:last-child{
    /* border-radius:0 0 8px 8px; */
    Tout est OK sur Chrome, Mozilla et Safari … même sur un iPad le résultat est nickel …
    Encore Bravo
    Philippe

      • Oui, mais pas encore disponible pour un problème de DNS. L’ancien hébergeur (SITTI) fait de la rétention et ne communique pas le code de transfert du domaine (vers LWS). De plus il n’ont pas renseigné l’adresse réelle du détenteur mais une de leur adresse @sitti.fr … Une question de quelques jours donc … La seule manière d’y accéder en attendant que le transfert soit effectif est de rajouter une ligne au fichier hosts (de Windows) comme suit :
        91.216.107.78 http://www.ets-nicaise.be
        Le chemin d’accès à ce fichier : C:\Windows\System32\drivers\etc
        Il faut aussi lui donner les droits d’accès lecture/écriture dans les propriétés du fichier.
        Sinon, voir d’ici quelques jours : http://www.ets-nicaise.be … sans la modif ci-dessus, on arrive sur l’ancien site.
        Merci en tout cas

        • Bonjour Frogweb …
          Plus de problème depuis ta précieuse aide de l’année dernière … encore merci.
          Depuis, j’utilise ton code pour les nouveaux sites que je développe. Pour info, une petite liste : http://www.artoflaw.be/site_fr/accueil.php (le client voulait du noir et blanc) : en cours de réalisation /// http://www.asociacionfrancofonos.eu /// http://www.ets-nicaise.be /// http://www.persan.eu /// http://www.wg-hersentumoren.be (sur certaines pages, mix du déroulant vertical et horizontal).
          J’ai cherché d’autres couleurs mais je n’ai pas trouvé quelque chose de correct, soit c’est trop flash, soit trop terne … J’ai donc dupliqué les 4 couleurs proposées dans ton tuto pour les menus 5, 6 et 7.
          Bien à toi

          • Bonjour Frogweb,
            Je me tourne vers toi car je ne trouve pas de solution à mon petit problème (qui n’a rien à voir avec ton menu): J’ai une fonction javascript qui me permet d’afficher certaines informations en popup. Ca fonctionne partout sauf sur IE11 et Edge … les popups s’ouvrent en nouvel onglet … peut-être as-tu une piste à me conseiller …

            Mon code javascript:

            var win=null;
            function openfenetre(mypage,myname,w,h,scroll,pos){
            if(pos== »random »){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
            if(pos== »center »){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
            else if((pos!= »center » && pos!= »random ») || pos==null){LeftPosition=0;TopPosition=20}
            settings=’width=’+w+’,height=’+h+’,top=’+TopPosition+’,left=’+LeftPosition+’,scrollbars=’+scroll+’,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no’;
            win=window.open(mypage,myname,settings);}

            Et la fonction qui appelle le code dans ma page :
            …

            Une idée ou une piste ?
            Mille mercis d’avance
            Bien à toi

  118. Moi, ça fonctionne très bien le seul problème c’est que le menu est vertical… Et non pas horizontal !
    Le problème vient du CSS, c’est sûr mais je n’arrive pas à trouver où !
    Merci d’avance de votre aide, internautes venus des quatre coins du web !
    PS: je débute en liste déroulante, on m’a conseillé ce site, et je suis venu. Ce n’était pas intentionnel de base, mais je me suis laissé séduire par le code.
    PS2: J’utilise le menu déroulant noir proposé en haut de la page.
    Cordialement, MrCharlieWordream.

      • Bonjour !
        Donc désolé pour l’url du site, c’était une incompréhension de ma part, je n’avais pas compris que c’était un lien direct vers le site (le mien n’étant pas encore hébergé justement). Mais bon, passons 🙂 .
        Alors, comme je disais, mon problème était:
        Le menu déroulant horizontal se retrouve vertical.
        Je t’envoie une vidéo avec ma page web(non hébergée donc ;)) et une copie de mon code :

        La vidéo, visionnable at: https://youtu.be/7GQ6EgriyDw

        Le code:
        body
        {
        background-image: url(bigscreen.png);
        }

        article
        {
        text-align: center;
        border:solid 2px black;
        padding: 20px;
        margin-right: 10%;
        margin-left: 10%;
        margin-top: 8%;
        background-image: url(fondhtml1.png);
        }

        footer
        {
        text-align: center;
        }

        header
        {
        text-align: center;
        }

        ul
        {
        font:normal 25px arial;
        color: black;
        text-align: left;
        width: 20%;
        }

        ul:hover
        {
        text-decoration: underline;
        }

        a
        {
        color: black
        }

        p
        {
        font:normal 20px Arial;
        text-align: left;
        }

        h1
        {
        background-color: orange;
        color: black;
        font:oblique 50px Impact;
        }

        a:hover
        {
        color: orange;
        }

        .qsj
        {
        font: oblique 20px Impact;
        color: #FFFFFF
        }

        .qsj:hover
        {
        background-color: black;
        }

        .facultatif
        {
        font:normal 15px Arial;
        color: orange;
        }

        .liste2
        {
        text-align: center;
        text-decoration: underline;
        font:oblique 25px Arial;
        }

        /* Menu déroulant(at: FrogWeb) */
        html,body {
        padding:0;
        margin:0;
        height:100%;
        }
        #menu-deroulant li {
        display: inline-block;
        }
        #menu, #menu ul {
        padding:0;
        margin:0;
        list-style: none;
        text-align: center;
        }

        #menu li {
        display:inline-block;
        vertical-align: top;
        position: relative;
        background: orange;
        }
        #menu li li {
        display:inherit;
        }
        #menu li:hover {
        background: black;
        }
        #menu a {
        display:inline-block;
        padding:5px 50px;
        text-decoration: none;
        color:#fff;
        font-family:arial;
        }
        #menu ul li a {
        padding:5px 8px;
        }
        #menu ul {
        position: absolute;
        z-index: 1000;
        min-width:100%;
        white-space: nowrap;
        text-align: left;
        }
        #menu ul ul {
        left:100%;
        top:0;
        overflow: hidden;
        max-width: 0;
        min-width: 0;
        transition: 0.3s all;
        }
        #menu ul li:hover ul {
        max-width: 30em;
        }
        #menu ul li {
        max-height:0;
        overflow: hidden;
        transition:all 0.8s;
        }
        #menu li li li {
        max-height: inherit;
        }
        #menu li:hover li {
        max-height: 15em;
        overflow: visible;
        }

        • Si je regarde ton code, il ya quand même pas mal de modif que tu as faite par rapport à mon code original.
          Et certaines peuvent tout à fait changer les choses.
          Par exemple, tu as un width:20% sur ul, déjà c’est assez curieux de mettre ça sur toutes les ul, mais pour le menu c’est un vrai problème.
          Si l’ul de premier niveau ne fait que 20% les liens ont peu de chance d’être à l’horizontal par manque de place.
          Une autre modif qui peut poser problème, un inline-block sur #menu a. C’est bien display:block qu’il faut mettre et non pas inline-block qui forcerait à mettre les a, les uns à côté des autres.
          Modifie ces deux lignes et dit moi ce qu’il en est.
          Au besoin je te demanderais de me donner le code html.

  119. Salut,
    Donc le menu est déjà bien mieux, merci beaucoup. Seul petit bémol, le menu est toujours vertical. Serait-ce dû à une propriété de type align ?( avant de me remettre à tout modifier… je sais, ma curiosité devrait être ajustée) .
    Une fois ce problème réglé, ce « superbe » menu sera enfin opérationnel !
    Merci d’avance pour les réponses,
    MrCharlieWordream.

    • Salut,
      avec le code de mon menu celui-ci est centré.
      Donc il y a quelque chose que tu as modifié ou rajouter qui fait que ça ne le fait plus.
      Une cause serait qu’il n’y est pas padding:0 sur ul.
      Une autre cause serait qu’il y est quelque chose à gauche du menu.
      En tous cas difficile à dire sans ton code.
      Ta page est-elle en ligne ?

  122. Bonjour,
    Cherchant une petite info sur Frogweb, je viens de voir tous ces remerciements ! et moi avec mon beau menu déroulant couleurs à deux niveaux, j’ai pas dis merci !
    Merci donc pour tous ces codes et infos (surtout le menu à deux niveaux).
    Je ne suis pas un pro du codage, loin de là, mais avec les cours d’Openclassrooms et le topo de Mateo21 sur HTML5 et CSS3, je pense m’en être sorti pas trop mal.

    Super mise en pratique du « vivre ensemble » que le partage de l’expérience. Merci encore.
    Je complèterais juste le commentaire de Phil (n° 58) qui « laisse » à César ce qui est à César, avec le « et à Dieu ce qui est à Dieu ».
    En rapport avec le beau menu déroulant 2 niveaux de Choisislavie.COM (onglet « le film », sous menu Arabic ou Portuguese). Il y a sûrement encore des erreurs dans le code css, mais ça marche plutôt bien.
    Alors MERCI Ronamazona, sincèrement, et longue route à toi.
    Jean-Luc

    • Eh bien, voilà une journée qui commence bien.
      Un grand merci à toi aussi pour ton commentaire encourageant et très agréable.
      Tu as réussi une très bonne intégration de mon menu sur ton site.
      En ce qui concerne ton code tu te débrouilles très bien, je n’ai trouvé que de petites erreurs qui ne nuiront pas au fonctionnement du site.
      Je t’invites à le passer au validateur du W3C html et css.
      Si tu n’arrive pas à les corrigées ou les comprendre, fais mois signe ici.

  125. Bonjour,
    J’ai appliqué la méthode « la plus sexy » mais je souhaite y apporter une modification, je m’explique. Comme barre des menus, j’ai mis une image et quand je passe ma souris dessus, le menu se déroule vers le bas donc. Or j’aimerais que le menu se déroule vers la droite, horizontalement donc. Que dois-je modifier?

  128. par contre si à la place du lien menu, j’aime une image qui est plus grosse, comment je fais pour régler afin que le fond bleu n’apparaisse pas autour des sous menus après et face une bande plus large que prévue?

  129. Je ne suis qu’un amateur qui occupe son temps libre (retraité depuis 2 ans) à plonger dans
    l’univers du html/css que je connaissais mal, ayant surtout travaillé sur des systèmes Unix
    et sur le shell –
    Un grand merci pour cette brillante démonstration qui me sera particulièrement utile, c’est une chance d’avoir des gens comme toi sur le web qui apportent leur précieux savoir-faire aux néophytes tels que moi !

  132. Bonjour FrogWeb,

    Doit-on te citer (sur le site) si on utilise ton code? (je l’ai pas mal modifié pour que ça colle mieux au forum que je suis en train de faire. J’ai juste quelques notions manquantes au niveau du CSS3, d’où mon passage ici 🙂 )

    En tout cas merci à toi pour ce tuto il est vraiment bien fait et complet

    ps: pour le menu vertical que tu propose dans l’autre tuto, en faisant 3-3 manips je pense que tu pourrais le rendre mieux => en faisant dérouler la liste de sous menu juste à droite de celui que tu survole. Je pense que ca se prêterait mieux aux sites en général (je me trompe peut-être!) Je sais pas si je me suis bien exprimé mais en tout les cas: superbe boulot à toi!

    • Salut,

      merci pour ton message.
      tu peux prendre tous les codes du site et les utiliser comme bon te semble. Absolument aucune obligation de citer Frogweb. (après ça fait toujours plaisir de se retrouver ans les crédits d’un site^^).
      Pour ta suggestion et si j’ai bien compris, c’est le fonctionnement du menu en démo (pas celui en accordéon, l’autre juste au-dessus).

      • En fait oui ^^

        Ils m’étaient passé inaperçus. Pour tout t’espliquer j’ai juste utiliser ce tuto-ci puis je me suis dit: allons visiter ce qu’il fait d’autres de beau. Et je n’ai malheureusement que regarder les résultats partout mais celui en blanc n’est pas assez ressorti à mes yeux 😉
        En tout cas: très beau travail à toi!

  133. Bonjour,

    Merci pour la publication de ……. menu-demo2

    Je l’ai mis en œuvre avec succés. Maintenant je suis confronté au problème suivant :

    Sur un lien <li, je souhaiterais ajouter 3 autres liens <li, mais je n'arrive pas a enrichir le CSS
    Pouvez-vous me communiquer quelques pistes. Merci.

    Salutations
    Jack

    PS : je suis un "vieux" débutant …

  136. bonjour,

    J’ai procédé à quelques aménagements de : http://www.frogweb.fr/demos/menu-deroulant-2-niveaux.html. A savoir :

    #menu li {
    display:inline-block;
    vertical-align: top;
    position: relative;
    /*modif jc*/
    height:32px;
    width:200px;
    /* modif jc*/

    #menu a {
    display:block;
    /*modif jc*/
    /*padding:5px 50px;*/
    padding:0px 50px;
    /*modif jc*/
    text-decoration: none;
    color:#fff;
    font-family:arial;
    /*modif jc*/
    height:32px;
    /* modif jc*/

    #menu ul {
    position: absolute;
    z-index: 1000;
    min-width:100%;
    white-space: nowrap;
    /*modif jc*/
    /*text-align: left;*/
    text-align: center;
    /*modif jc*/

    Petit soucis : les innerHTML « Lien menu » ne sont plus centrés verticalement …

    Peux-tu m’aider ? Merci.

    • ça se fait en JS ou en PHP et ce n’est plus mon domaine ^^
      Toutefois tu dois pouvoir trouver des scripts tout fait.
      A noter qu’il faudra également créer un cookie ou une table dans la base pour garder les infos de l’utilisateur.
      Sinon son choix ne va pas rester.
      Un tuto qui fait les deux :
      Tuto changer styles
      Il y a même plus simple, en rajoutant une classe à body avec du JS et l’aide de jquery.
      De cette manière un seul fichier css suffit.

  142. bonjour frog,

    je comprends pas comment peut fonctionner ta transition sachant que le all doit s’appliquer au passage de la souris et donc je l’aurais mis dans un paragraphe hover. peux tu m’expliquer?

    Sinon, je n’arrive pas à centrer mon sous-menu, il se décale à droite quand je passe la souris dessus. Peux-tu m’aider également?

    Merci d’avance.

    Tom

    • Salut,
      désolé mais j’ai un peu de mal avec tes deux questions ^^
      all sur la transition indique qu’elle doit se faire sur tous les styles du coup je ne vois pas le rapport avec un paragraphe.
      Pour le décalage de ton menu, est-ce celui sur ton site ? Là encore je ne saisi pas le résultat que tu veux obtenir et il ne semble pas décalé.

  143. Bonjour FrogWeb,
    Merci pour se superbe exemple, j’avoue que je cherchait à faire un portail d’accès organisé à une multitude de document et cela m’a bien aidé.Même si j’avoue avoir galéré pour passer à une version un peu plus grosse.
    Etant donné que je débute j’aurais aimer soumettre mon menu à des personnes qui s’y connaissent pour avoir des commentaires sur ce que je fais bien et ce que je fais de moins bien surtout.
    En tout cas merci encore

  144. Bonjour,

    Super tuto, j’adore le rendu (pour le 2eme menu, le plus « sexy ») !

    J’ai par contre un petit soucis pour une chose : la taille des « cases/onglets » varie avec la longueur du texte qui y figure…

    En fait, je souhaiterais aligner le menu en 2 lignes de 3 boutons, cependant, vu que la taille varie, tous les boutons n’ont pas la meme largeur et ils ne sont donc pas du tout alignés : ce qui n’est pas esthétique du tout ! :/

    Comment pourrais-je faire pour « bloquer » la taille de la « case/onglet » à un nombre précis de pixel sans que cela varie selon le texte ?

    J’ai déjà défini la taille des onglets du menu mais cela ne leur empêche pas de varier selon la longueur du texte.

    Un coup de main ? 🙂
    Merci d’avance !

  145. Bonjour

    Après avoir beaucoup tâtonné pour créer un menu déroulant pour mon blog de test avant de l’installer sur le vrai blog, je suis « tombé » sur votre site qui m’a donné beaucoup d’informations et le beau menu déroulant « sexy » qui fonctionne parfaitement quand on le passe à « lamoulinette » mais installé sur blogger, il ne se déroule plus ? J’ignore pourquoi.
    J’ai laissé l’ancien menu moins beau qui se déroule très mal.

    Cordialement
    Par avance merci

  146. Hello
    Merci pour ce travail !
    J’aimerais savoir comment enlever les espaces entre les boutons du menu horizontal, en effet il y a toujours quelques pixels entre les boutons et chez moi ce sont des images qui doivent être collées les unes aux autres.
    Merci d’avance pour la réponse !

  148. Bonjour,

    je trouve votre menu superbe !! Je veux m’en inspirer (je suis débutant dans le domaine). A la place de mettre des couleurs dans les boites principales, j’aimerais y mettre une image. Chose que j’ai réussis (victory !!). Mais cette boite disparaît lorsque je passe ma souris dessus. J’aimerais qu’elle reste, et juste le texte passe en noir, le menu se déroule (ça c’est bon)…

    Comment puis-je réaliser cela ?
    Merci !

  150. Rebonjour,

    Visiblement mon commentaire n’était pas passé, je dois donc tout vous réexpliquer ! 😀

    J’avais réalisé il y a quelques années un CV en ligne, avec 4 catégories (expériences, formation, compétences et centre d’intérêts) et un effet déroulant pour chaque catégorie (voici le lien : http://www.ergomu.com). Le code était basé sur celui des FAQ de SFR, ce qui explique, si vous allez jeter un oeil au code source, que ce soit tellement le foutoir… En effet, je suis ergonome et pas développeur. L’objectif de ce CV en ligne développé avec autre chose que WIX ou autre, était de montrer que je me « débrouille » avec du code, suffisamment pour pouvoir travailler au sein d’une équipe de développeurs, ce que j’ai déjà fait. Voilà pour le cadre.
    Depuis quelques mois, le CV fonctionne toujours, mais a perdu son design et, plus problématique, les titres des catégories ne réagissent plus au survol (le pointeur reste un pointeur). Malheureusement, je n’ai pas la possibilité de vous montrer ce que ça donnait avant.

    Si vous ne pouvez pas m’aider, je crois qu’il ne me restera qu’à tout refaire à partir d’un template de base genre ça : http://fr.wix.com/website-template/view/html/1893?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2F2&bookName=&galleryDocIndex=7&category=portfolio-cv

    ou ça : http://fr.wix.com/website-template/view/html/1900?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2F2&bookName=&galleryDocIndex=8&category=portfolio-cv

    Merci beaucoup pour votre aide !

  153. Bonjour FrogWeb,

    Je rencontre le même problème exposé par Cédric dans le message 39 et Dufour dans le message 145. J’aimerais avoir ton avis sur le sujet.

    Le menu déroulant en quatre couleurs s’exécute parfaitement sur un site conventionnel. En revanche transposé dans un gadget Blogger, les menus ne se déroulent plus, l’espace entre les menus n’est pas pris en compte.

    Depuis le début de l’été 2016, le menu en CSS3 de mon site sur Blogger a cessé de fonctionner correctement. Je l’ai donc remplacé par celui ci-dessous qui bien que réalisé pour Blogger fonctionne à minima. Deux propriétés ne sont pas prises en compte, Le hover du menu déroulant et la dimension du menu proportionnelle à la taille des caractères.

    Pourrais-tu nous indiquer s’il existe un moyen de faire fonctionner ton menu sexy sur blogger ?

    Mon essai FrogWeb sur site conventionnel :
    http://damier.manceau.free.fr/essai-FrogWeb.html

    Mon menu à remplacer sur Blogger :
    http://damiermanceau.blogspot.fr/

    Merci de tes conseils

    Alain

  156. Bonjour
    c’est à devenir zinzin…j’ai réalisé mon menu grâce à ton tuto qui est extra (un énorme merci!!!) mais après 3 jours à essayer de le finaliser, j’avoue que je craque : il est parfait mais reste FIXE !!! et reste déroulé. Je ne sais pas comment le faire se « ranger » ! Ça me désespère..surtout que ça devient une urgence.

    Si tu pouvais me décoincer ce serait merveilleux car cela bloque le transfert de mon site vers le nouveau. J’ai beau chercher je ne trouve pas pourquoi !

    Je te copie mon menu (…et je demande juste un peu d’indulgence car je suis une totale autodidacte!..)

    http://blog-mode-tendance.blogspot.fr/ (pas encore en ligne)

    #menu-demo2, #menu-demo2 ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align: distribute;
    }
    #menu-demo2 li{
    display:inline-block;
    position:relative;
    border-radius:0px 0px 0 0;
    margin:0
    }
    #menu-demo2 ul li{
    display:inherit;
    border-radius:0;
    }
    #menu-demo2 ul li:hover{
    border-radius:0 0 0px 0px;
    }
    #menu-demo2 ul li:last-child{
    border-radius:0 0 0px 0px;
    }
    #menu-demo2 ul{
    position:absolute;
    z-index: 1000;
    max-height:0em;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
    background: #ffdfdc;
    }
    #menu-demo2 li:hover ul{
    max-height:0em;
    }
    /* background des liens menus */
    #menu-demo2 li:first-child{
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:nth-child(2){
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:nth-child(3){
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:nth-child(4){
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:nth-child(5){
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:nth-child(6){
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    #menu-demo2 li:last-child{
    background-color: #F9899F;
    background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
    background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
    }
    /* background des liens sous menus */
    #menu-demo2 li:first-child li{
    background:#FFDFDC;
    }
    #menu-demo2 li:nth-child(2) li{
    background:#FFDFDC;
    }
    #menu-demo2 li:nth-child(3) li{
    background:#FFDFDC;
    }
    #menu-demo2 li:nth-child(4) li{
    background:#FFDFDC;
    }
    #menu-demo2 li:nth-child(5) li{
    background:#FFDFDC;
    }
    #menu-demo2 li:nth-child(6) li{
    background:#FFDFDC;
    }
    #menu-demo2 li:last-child li{
    background:#FFDFDC;
    }

    /* background des liens menus et sous menus au survol */
    #menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:nth-child(5):hover, #menu-demo2 li:nth-child(5) li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:nth-child(6):hover, #menu-demo2 li:nth-child(6) li:hover{
    background:#Ffa1ae;
    }
    #menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
    background:#Ffa1ae;
    }
    /* les a href */
    #menu-demo2 a{
    text-decoration:none;
    display:block;
    padding:12px 0px;
    margin:0 0 0;
    color:#ffffff;
    font-size: 14px ;
    font-family:century gothic;
    text-transform: uppercase;
    text-align: center;
    width: 120px;
    line-height: 4px;
    font-weight:550;
    }
    #menu-demo2 ul a{
    padding-right :10px;
    padding-left: 10px;
    padding-top:4px;
    padding-bottom:4px;
    color:#000000;
    text-transform: lowercase;
    text-transform:initial;
    text-align: left;
    font-size: 13px;
    font-feature-settings: inherit;
    line-height: normal;
    text-align: distribute;
    }
    #menu-demo2 li:hover li a{
    color:#000000;
    text-transform:initial;
    text-align: distribute;
    background:FFA1AE;
    }
    #menu-demo2 li:hover a, #menu-demo2 li li:hover a{
    color:#ffffff;
    }

  157. …petite précision, je suis encore allé fouillée du coté des CSS de mon bloget j’ai changé display, :table en display: block dans le nav menu ul d’origine et ENFIN le menu s’est rangé…mais comme c’était trop beau il ne se déroule plus !

    Je me permet de coller les la partie CSS de ce menu d’origine (en espérant apporter une piste et pas encombrer ton site…

    Merci pour votre aide !!!

    /*——–[ top-menu ]————*/

    .ct-transition{
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -transition: all 0.2s linear;}
    .blog_social_block a:hover i,.ct-transition:hover{
    webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    }

    /*——[ Main-menu ]——-*/

    .nav-menu {
    padding: 0;
    width: auto;
    display: block;
    position: relative;
    margin-top: 0;
    z-index: 100;
    float:left;
    }

    .nav-menu ul {list-style: none;padding: 0px;margin: 0; display: block; z-index: 1;width:auto;}
    .nav-menu ul li {
    display: block;
    float: left;
    position: relative;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    list-style: none;
    font-size: 14px;
    margin-right: 30px;
    -moz-transition: background-color 400ms ease, border 200ms ease-out;
    -o-transition: background-color 400ms ease, border 200ms ease-out;
    -webkit-transition: background-color 400ms ease, border 200ms ease-out;
    transition: background-color 400ms ease, border 200ms ease-out;
    }

    .nav-menu li a {
    color: #fff;
    display: block;
    z-index: 100;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 4px;
    padding: 12px 1px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-family: montserrat, sans-serif;
    -moz-transition: border 300ms ease 0s , color 300ms ease 0s;
    -o-transition: border 300ms ease 0s , color 300ms ease 0s;
    -webkit-transition: border 300ms ease 0s , color 300ms ease 0s;
    transition: border 300ms ease 0s , color 300ms ease 0s;
    }

    .nav-menu li a:hover,.nav-menu li a.current,.nav-menu li:first-child a { color:#fff;}

    .sticky { position :fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; }

  160. Bonjour,

    Je cherche une solution simple afin de mettre des sous menus dans un site WIX. Le code du 2 niveaux peut-il fonctionner sur wix ?
    J’ai vu qu’il était possible d’enserrer du code, mais cela a t’il été testé par des utilisateurs ?

    Bonne fin de journée

  161. salutation je travail le html et le css depuis 1mois et demi sa me plait bien
    j’ai créé un tableau deroulant avec l’aide de vidéo youtube franchement ils y en a des bien expliqué mais je ne trouve pas un petit truc que je cherche : voila
    mon tablaeu horizontale et grand il prend toute la page et j’ai un soumenu (bien sur ) et aussi un sous-soumenu qui souvre sur la ldroite quand j’arrive sur l’emplacement ou il doit s’ouvrir jusque la tou va bien mais les deux derniéres quand elles souvrent je ne les vois plus car elle sont trop sur la droit donc plus sur mon ecran voila j’aimerai que c’est deux dernieres souvrent sur la gauche (et seulement c’est deux derniére ??? comment faire je trouve pas . je te colle mon html et mon css (j’ai surement fait aussi des erreurs mais je le trouve beau mon tableau ,

    Tableau Déroulant pour page site

    SeigneurVoyageur ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurBelzegor ▼

    STATION COMMERCIAL
    GUILDE Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurInconnus ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurMinos ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurToto91 ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurSpacecodes ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurSkull ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurDjimha ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurKroon ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    SeigneurCelestin ▼

    STATION COMMERCIAL
    GUILDE (Objets de Guilde)
    Rapports de Combats ▶

    Combats Gagnés
    Combats Perdus

    Loisirs-Passions-Travail
    LIENS

    et le css qui donne sa ::::

    body {
    color:black;
    background-color:white;
    background-image:url(images/death.jpg);/* image de fond*/
    background-repeat:no-repeat;/* ne repéte pas l’image de fond*/
    background-size:100%;
    }
    nav{
    width: 100%;
    background-color: #424558;
    border-radius: 10px;
    }

    nav > ul{
    margin: 0px;
    padding:0px;
    }

    nav > ul:after{
    content: «  »;
    display: block;
    clear: both;
    }

    nav > ul > li{
    float: left;
    position: relative;
    }

    nav > ul > li > a{
    padding: 20px 30px;
    color: #FFF;

    }

    nav > ul> li:hover a{
    padding: 15px 30px 20px 30px;
    }

    nav li{
    list-style-type: none;
    }

    .submenu{
    display: none;
    }
    .submenu ul {
    display: none;
    }

    nav a{
    display: inline-block;/*enlevé les soulignages*/
    text-decoration: none;
    }

    nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 1000;
    }
    nav li ul li:hover ul{
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 220px;
    padding: 0px;
    z-index: 1000;
    }
    nav li ul li ul :hover ul{
    display: inline-block;
    position: absolute;
    top: 100%;
    right: 221px;
    padding: 0px;
    z-index: 1000;
    }

    .submenu li{
    border-bottom: 1px solid #CCC;
    border-radius: 10px;
    }

    .submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 160px;
    border-radius: 10px;
    }

    .menu-Voyageur:hover{
    border-top: 5px solid #e44d26;
    background-color: RGBa(228, 77, 38, 0.15);
    border-radius: 10px;
    }
    .menu-Belzegor:hover{
    border-top: 5px solid #0070bb;
    background-color: RGBa(000, 112, 192, 0.15);
    border-radius: 10px;
    }
    .menu-Inconnus:hover{
    border-top: 5px solid #f1dc4f;
    background-color: RGBa(241, 211, 79, 0.15);
    border-radius: 10px;
    }
    .menu-Minos:hover{
    border-top: 5px solid #2B6F6F;
    background-color: RGBa(43, 111, 111, 0.15);
    border-radius: 10px;
    }
    .menu-Toto91:hover{
    border-top: 5px solid #915780;
    background-color: RGBa(145, 87, 128, 0.15);
    border-radius: 10px;
    }
    .menu-Spacecodes:hover{
    border-top: 5px solid #808080;
    background-color: RGBa(128, 128, 128, 0.15);
    border-radius: 10px;
    }
    .menu-Skull:hover{
    border-top: 5px solid #33FF33;
    background-color: RGBa(51, 255, 51, 0.15);
    border-radius: 10px;
    }
    .menu-Djimha:hover{
    border-top: 5px solid #DC143C;
    background-color: RGBa(220, 20, 60, 0.15);
    border-radius: 10px;
    }
    .menu-Kroon:hover{
    border-top: 5px solid #865B00;
    background-color: RGBa(134, 91, 0, 0.15);
    border-radius: 10px;
    }
    .menu-Celestin:hover{
    border-top: 5px solid #F4A460;
    background-color: RGBa(244, 164, 96, 0.15);
    border-radius: 10px;
    }

    .menu-Voyageur .submenu{
    background-color: RGB(230, 100, 40);
    border-radius: 10px;
    }
    .menu-Voyageur .submenu ul{
    background-color: RGB(230, 100, 40);
    border-radius: 10px;
    }
    .menu-Belzegor .submenu{
    background-color: RGB(000, 160, 240);
    border-radius: 10px;
    }
    .menu-Belzegor .submenu ul{
    background-color: RGB(000, 160, 240);
    border-radius: 10px;
    }
    .menu-Inconnus .submenu{
    background-color: RGB(250, 215, 50);
    border-radius: 10px;
    }
    .menu-Inconnus .submenu ul{
    background-color: RGB(250, 215, 50);
    border-radius: 10px;
    }
    .menu-Minos .submenu{
    background-color: RGB(43, 111, 111);
    border-radius: 10px;
    }
    .menu-Minos .submenu ul{
    background-color: RGB(43, 111, 111);
    border-radius: 10px;
    }
    .menu-Toto91 .submenu{
    background-color: RGB(180, 87 ,128);
    border-radius: 10px;
    }
    .menu-Toto91 .submenu ul{
    background-color: RGB(180, 87 ,128);
    border-radius: 10px;
    }
    .menu-Spacecodes .submenu{
    background-color: RGB(128, 128, 128);
    border-radius: 10px;
    }
    .menu-Spacecodes .submenu ul{
    background-color: RGB(128, 128, 128);
    border-radius: 10px;
    }
    .menu-Skull .submenu{
    background-color: RGB(51, 255 ,51);
    border-radius: 10px;
    }
    .menu-Skull .submenu ul{
    background-color: RGB(51, 255 ,51);
    border-radius: 10px;
    }
    .menu-Djimha .submenu{
    background-color: RGB(220, 20, 60);
    border-radius: 10px;
    }
    .menu-Djimha .submenu ul{
    background-color: RGB(220, 20, 60);
    border-radius: 10px;
    }
    .menu-Kroon .submenu{
    background-color: RGB(134, 91, 0);
    border-radius: 10px;
    }
    .menu-Kroon .submenu ul{
    background-color: RGB(134, 91, 0);
    border-radius: 10px;
    }
    .menu-Celestin .submenu{
    background-color: RGB(244, 164, 96);
    border-radius: 10px;
    }
    .menu-Celestin .submenu ul{
    background-color: RGB(244, 164, 96);
    border-radius: 10px;
    }

    .submenu li:hover a{
    color: #EEE;
    font-weight: bold;
    }

    .menu-Voyageur .submenu li:hover{
    background-color: RGB(210, 77, 60);
    }
    .menu-Voyageur .submenu li ul :hover{
    background-color: RGB(170, 77, 60);
    }

    .menu-Belzegor .submenu li:hover{
    background-color: RGB(000, 115, 200);
    }
    .menu-Belzegor .submenu li ul :hover{
    background-color: RGB(000, 115, 140);
    }

    .menu-Inconnus .submenu li:hover{
    background-color: RGB(200, 165, 75);
    }
    .menu-Inconnus .submenu li ul :hover{
    background-color: RGB(170, 165, 75);
    }

    .menu-Minos .submenu li:hover{
    background-color: RGB(48, 135, 120);
    }
    .menu-Minos .submenu li ul :hover{
    background-color: RGB(00, 135, 120);
    }

    .menu-Toto91 .submenu li:hover{
    background-color: RGB(145, 87, 128);
    }
    .menu-Toto91 .submenu li ul :hover{
    background-color: RGB(115, 87, 128);
    }
    .menu-Spacecodes .submenu li:hover{
    background-color: RGB(100, 100, 100);
    }
    .menu-Spacecodes .submenu li ul :hover{
    background-color: RGB(80, 100, 100);
    }
    .menu-Skull .submenu li:hover{
    background-color: RGB(11, 215, 11);
    }
    .menu-Skull .submenu li ul :hover{
    background-color: RGB(11, 170, 11);
    }
    .menu-Djimha .submenu li:hover{
    background-color: RGB(200, 0, 40);
    }
    .menu-Djimha .submenu li ul :hover{
    background-color: RGB(160, 0, 40);
    }

    .menu-Kroon .submenu li:hover{
    background-color: RGB(104, 61, 0);
    }
    .menu-Celestin .submenu li:hover{
    background-color: RGB(204, 124, 56);
    }

Laisser un commentaire