Bonjour,

je suis en train de concevoir une page web qui contient un menu déroulant.

Jusque-là pas de souci, le menu déroulant horizontal est créé et fonctionnel.

Il contient une entrée, quand on passe la souris dessus ça ouvre des sous-menus, tout fonctionne.

Mais j'aimerais ajouter un niveau à ce menu : quand on passe la souris sur l'un des sous-menus, un sous-sous-menu s'affiche alors à droite.

Pourriez-vous m'indiquer comment inscrire ça dans mon CSS ?

Je vous donne un exemple de mon code :

<li id="menu"><a href="#">Fruits</a>
            <ul>
                <li id="sous-menu"><a href="#">Cerise</a></li>
                <li id="sous-menu"><a href="#">Nectarine</a></li>
            </ul>
</li>

<li id="menu"><a href="#">Légumes</a>
            <ul>
                <li id="sous-menu"><a href="#">Légumes verts</a>
                    <ul>
                        <li id="sous-sousmenu"><a href="#">Brocoli</a></li>
                        <li id="sous-sousmenu"><a href="#">Petits pois</a></li>
                    </ul>
                </li>
                <li id="sous-menu"><a href="#">Légumes rouges</a></li>
            </ul>
</li>

J'aimerais donc que quand on passe la souris sur "légumes verts", ça ouvre un sous-sous menu à droite de "légumes verts" avec le choix entre brocoli et petits pois...

Merci beaucoup par avance pour votre aide !

M.

Hello,

Avec le code CSS que tu utilises déjà ça serait plus simple.

Tout d'abord, il faut signaler les erreurs dans ton code HTML.
Tu utilises plusieurs fois le même ID et c'est à l'encontre même de ce qu'est un ID, un ID doit être unique et ne représenter qu'un élément.

Il serait bon d'utiliser les classes pour identifier des éléments avec un comportement similaire.

Enfin pour répondre à ta question, il me semble que simplement :

#sous-menu {
    display: none;
}
#sous-menu:hover {
    display: inline-block;
}

Devrait donner le résultat attendu.

Il faut ensuite définir le positionnement que tu souhaites pour ton sous-sous-menu.

PS : il est très mauvais d'afficher des éléments à leur survol, il est préférable que cela résulte d'une vraie action d'un utilisateur tel qu'un clic

-
Edité par vernaisc 4 juillet 2019 à 15:25:47

Salut,

vernaisc, ta solution ne peut pas fonctionner. Comment peut-on survoler un élément qui n'existe pas ?

Donc pour résumer nos deux posts:

<ul id="menu">
  <li>lien menu
    <ul class="sm">
      <li>lien sous menu
        <ul class="ssm">
          <li>lien sous sous menu</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.sm, .ssm {
   display:none;
}
#menu li:hover .sm, .sm li:hover .ssm {
   display:block
}

Bonjour MBrt ,

Un exemple si cela peut t'aider

https://codepen.io/Zonecss/pen/VxdPmO

Bonjour à tous,

merci beaucoup pour vos réponses !! je teste tout ça et je reviens vers vous...

M.

Bonjour,

Alooooors... J'ai revu mon code, j'ai supprimé les erreurs signalées par @vernaisc (merci beaucoup !) mais je n'arrive toujours pas à afficher ce sous-sous menu...

Voici mon CSS, pour l'instant, en ce qui concerne mon menu et mon sous-menu :

#menu-deroulant ul{ /*menu entier*/
position:absolute;
z-index: 2000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#menu-deroulant li{ /*config 1er niveau du menu*/
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}

#menu-deroulant ul li{
display:inherit;
border-radius:0;
}
#menu-deroulant li:hover{
border-radius:0;
}
#menu-deroulant li:last-child{
border-radius:0 0 8px 8px;
}
#menu-deroulant li:hover ul{
max-height:55em;
}

En fait, je m'embrouille pas mal entre les niveaux de UL et de LI... Du coup, je n'arrive pas à avancer...

Salut,

redonne nous ton code html corrigé.

Voici :

<nav>
<ul id="menu-deroulant">

    <li><a href="#">Fruits</a>
            <ul>
                <li><a href="#">Cerise</a></li>
                <li><a href="#">Nectarine</a></li>
            </ul>
    </li>

    <li><a href="#">Légumes</a>
            <ul>
                <li><a href="#">Légumes verts</a>
                    <ul>
                        <li><a href="#">Brocoli</a></li>
                        <li><a href="#">Petits pois</a></li>
                    </ul>
                </li>
                <li><a href="#">Légumes rouges</a></li>
            </ul>
    </li>
</ul>
</nav>

Pourquoi tu ne reprends pas l'ensemble de mon code ?
Après tu as juste à modifier les couleurs comme bon te semble.

Et un menu 3 niveaux n'est pas forcément une bonne idée...

Je viens de tester, en remaniant mon HTML comme tu l'as construit, et en appliquant juste le CSS que tu as donné.

Le résultat : mon 3ème niveau ne s'affiche pas du tout...

Si je reprends mon code :

HTML :

<nav>
<ul id="menu-deroulant">

    <li><a href="#">Fruits</a>
            <ul>
                <li><a href="#">Cerise</a></li>
                <li><a href="#">Nectarine</a></li>
            </ul>
    </li>

    <li><a href="#">Légumes</a>
            <ul>
                <li><a href="#">Légumes verts</a>
                    <ul>
                        <li><a href="#">Brocoli</a></li>
                        <li><a href="#">Petits pois</a></li>
                    </ul>
                </li>
                <li><a href="#">Légumes rouges</a></li>
            </ul>
    </li>
</ul>
</nav>

CSS:

#menu-deroulant ul{ /*menu entier*/
position:absolute;
z-index: 2000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#menu-deroulant li{ /*config 1er niveau du menu*/
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}

#menu-deroulant ul li{
display:inherit;
border-radius:0;
}
#menu-deroulant li:hover{
border-radius:0;
}
#menu-deroulant li:last-child{
border-radius:0 0 8px 8px;
}
#menu-deroulant li:hover ul{
max-height:55em;
}

Salut,

commence par rajouter overflow:visible à #menu-deroulant li:hover ul

On verra après la suite si tu ne t'en sort toujours pas.

ça ne change rien...

???

J'ai repris ton code, j'ai ajouté overflow:visible sur #menu-deroulant li:hover ul et je vois bien les sous menus...

Regarde :

https://jsfiddle.net/Site_Frogweb/ft3h8eks/

du coup, est-ce que tu sais comment je pourrais décaler encore un peu plus les sous menus sur la droite ? qu'ils dépassent du "cadre" du menu précédent, pour que tout soit bien lisible ?

Merci beaucoup pour ton aide (et ta patience !)

ça devrait être bon avec ça :

#menu-deroulant {
  padding:0;
  margin:0;
}
#menu-deroulant ul,
#menu-deroulant li:hover ul ul{ /*menu entier*/
position:absolute;
z-index: 2000;
max-height:0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
padding:0;
margin:0
}

#menu-deroulant li{ /*config 1er niveau du menu*/
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}

#menu-deroulant ul li{
display:inherit;
border-radius:0;
}
#menu-deroulant li:hover{
border-radius:0;
}
#menu-deroulant li:last-child{
border-radius:0 0 8px 8px;
}
#menu-deroulant li:hover ul,
#menu-deroulant li li:hover ul{
  overflow:visible;
  max-height:55em;
}
#menu-deroulant ul ul {
  left:100%;
  top:0
}

Bonjour.

Pour rappel :

Source: Règles et bonnes pratiques du forum - À lire avant de poster - OpenClassrooms

Super, merci beaucoup, c'est parfait !!!!