Bonjour. J'aurai besoin d'aide pour la création d'un menu déroulant. Comme vous pouvez le voir sur la capture d'écran, le dernier sous menu ne s'affiche pas et je ne comprend pas pourquoi. Merci d'avance pour votre aide.

Code Html :

<ul id="menu-demo2">
<li><a href="#">Bringé</a>
<ul>
<li><a href="#">Gladiateur des Terres d'Abalone</a></li>
</ul>
</li>
<li><a href="#">Fauve</a>
<ul>
<li><a href="#">CH Jaganarayan du Cerbère d'Eyjeaux</a></li>
</ul>
</li>
<li><a href="#">Noir</a>
<ul>
<li><a href="#">Abia du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Arzele du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Cosa nostra du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Daad du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Djedkare du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Imperator du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Inger kovu du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Lobates du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Pyrame d'Iskandar</a></li>
</ul>
</li>
<li><a href="#">Arlequin</a>
<ul>
<li><a href="#">Bayard du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Dom perignon du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Elederaan du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Gaurang du Cerbère d'Eyjeaux</a></li>
<li><a href="#">L'unique du Cerbère d'Eyjeaux</a></li>
<li><a href="#">Pharamond d'Iskandar</a></li>
<li><a href="#">Ubald du Cerbère d'Eyjeaux</a></li>
</ul>
</li>
<li><a href="#">Gris Bigarré</a>
<ul>
<li><a href="#">Aikio du Cerbère d'Eyjeaux</a></li>
</ul>
</li>
<li><a href="#">Bleu</a>
<ul>
</ul>
</li>
</ul>

Code CSS :

1. menu-demo2, #menu-demo2 ul{

padding:0;
margin:0;
list-style:none;
text-align:center;
}

1. menu-demo2 li{

display:inline-block;
position:relative;
border-radius:8px 8px 8px 8px;
margin-bottom:8px;
}

1. menu-demo2 ul li{

display:inherit;
border-radius:8px 8px;
}

1. menu-demo2 ul li:hover{

border-radius:8px 8px;
}

1. menu-demo2 ul li:last-child{

border-radius:0 0 8px 8px;
}

1. 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;
}

1. menu-demo2 li:hover ul{

max-height:15em;
}
/* background des liens menus */

1. menu-demo2 li:first-child{

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(2){

background-color: #600103;
background-image: -webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(3){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(4){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(5){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(6){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(7){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(8){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(9){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(10){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(11){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(12){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(13){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(14){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(15){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(16){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(17){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(18){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(19){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(20){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(21){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(22){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(23){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(24){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:nth-child(25){

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

1. menu-demo2 li:last-child{

background-color: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}
/* background des liens sous menus */

1. menu-demo2 li:first-child li{

background:#600103;
}

1. menu-demo2 li:nth-child(2) li{

background:#600103;
}

1. menu-demo2 li:nth-child(3) li{

background:#600103;
}

1. menu-demo2 li:nth-child(4) li{

background:#600103;
}

1. menu-demo2 li:nth-child(5) li{

background:#600103;
}

1. menu-demo2 li:nth-child(6) li{

background:#600103;
}

1. menu-demo2 li:nth-child(7) li{

background:#600103;
}

1. menu-demo2 li:nth-child(8) li{

background:#600103;
}

1. menu-demo2 li:nth-child(9) li{

background:#600103;
}

1. menu-demo2 li:nth-child(10) li{

background:#600103;
}

1. menu-demo2 li:nth-child(11) li{

background:#600103;
}

1. menu-demo2 li:nth-child(12) li{

background:#600103;
}

1. menu-demo2 li:nth-child(13) li{

background:#600103;
}

1. menu-demo2 li:nth-child(14) li{

background:#600103;
}

1. menu-demo2 li:nth-child(15) li{

background:#600103;
}

1. menu-demo2 li:nth-child(16) li{

background:#600103;
}

1. menu-demo2 li:nth-child(17) li{

background:#600103;
}

1. menu-demo2 li:nth-child(18) li{

background:#600103;
}

1. menu-demo2 li:nth-child(19) li{

background:#600103;
}

1. menu-demo2 li:nth-child(20) li{

background:#600103;
}

1. menu-demo2 li:nth-child(21) li{

background:#600103;
}

1. menu-demo2 li:nth-child(22) li{

background:#600103;
}

1. menu-demo2 li:nth-child(23) li{

background:#600103;
}

1. menu-demo2 li:nth-child(24) li{

background:#600103;
}

1. menu-demo2 li:nth-child(25) li{

background:#600103;
}

1. menu-demo2 li:last-child li{

background:#600103;
}
/* background des liens menus et sous menus au survol */

1. menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(5):hover, #menu-demo2 li:nth-child(5) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(6):hover, #menu-demo2 li:nth-child(6) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(7):hover, #menu-demo2 li:nth-child(7) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(8):hover, #menu-demo2 li:nth-child(8) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(9):hover, #menu-demo2 li:nth-child(9) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(10):hover, #menu-demo2 li:nth-child(10) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(11):hover, #menu-demo2 li:nth-child(11) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(12):hover, #menu-demo2 li:nth-child(12) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(13):hover, #menu-demo2 li:nth-child(13) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(14):hover, #menu-demo2 li:nth-child(14) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(15):hover, #menu-demo2 li:nth-child(15) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(16):hover, #menu-demo2 li:nth-child(16) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(17):hover, #menu-demo2 li:nth-child(17) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(18):hover, #menu-demo2 li:nth-child(18) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(19):hover, #menu-demo2 li:nth-child(19) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(20):hover, #menu-demo2 li:nth-child(20) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(21):hover, #menu-demo2 li:nth-child(21) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(22):hover, #menu-demo2 li:nth-child(22) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(23):hover, #menu-demo2 li:nth-child(23) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(24):hover, #menu-demo2 li:nth-child(24) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:nth-child(25):hover, #menu-demo2 li:nth-child(25) li:hover{

background:#b77b7c;
}

1. menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{

background:#b77b7c;
}
/* les a href */

1. menu-demo2 a{

text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}

1. menu-demo2 ul a{

padding:8px 0;
}

1. menu-demo2 li:hover li a{

color:#fff;
text-transform:inherit;
}

Qu'y a t-il ici ?

Salut,
Car il y a un max-height tout simplement.
Il ne faut pas mettre ça comme ça :

#menu-demo2 li:hover ul {
    max-height: 15em;
}

Au pire :

#menu-demo2 li:hover ul {
    max-height: 100vh;
}

vh = viewport height
(et vw = viewport width)

Le 04 décembre 2019 à 17:36:54 Marav a écrit :
Qu'y a t-il ici ?

Un troisième sous-menu

Le 04 décembre 2019 à 22:13:19 fantomasticot a écrit :
Salut,
Car il y a un max-height tout simplement.
Il ne faut pas mettre ça comme ça :

#menu-demo2 li:hover ul {
    max-height: 15em;
}

Au pire :

#menu-demo2 li:hover ul {
    max-height: 100vh;
}

vh = viewport height
(et vw = viewport width)

Merci je vais testais avec ta solution .

Le 04 décembre 2019 à 22:13:19 fantomasticot a écrit :
Salut,
Car il y a un max-height tout simplement.
Il ne faut pas mettre ça comme ça :

#menu-demo2 li:hover ul {
    max-height: 15em;
}

Au pire :

#menu-demo2 li:hover ul {
    max-height: 100vh;
}

vh = viewport height
(et vw = viewport width)

Alors j'ai essayé avec ta solution, ça beugé encore alors je lui ai rajouté l'attribut z-index avec un gros chiffre pour être sûr. Ça à réglé mon problème en partie.
Je me suis aperçu que l'un des deux menu beug toujours. (j'ai la même structure de menu sur deux pages différentes). Car l'un des deux à plus de sous-menu que l'autre.

Sur celui qui beug le dernier sous-menu est toujours coupé, les informations n'apparaissent qu'au fur et à mesure qu'on réduit l'écran.

Si quelqu'un passe par là, tout aide est la bienvenue. Je sèche.

Pourquoi tu utilises pas un framework css ? Tout ce code pour un menu deroulant

Tu peux faire uncodepen ou un truc du genre ? C'est horrible le code sur jvc