Se connecter

Informatique

Création de sites web

Sujet : [Besoin d'aide] Sous menu déroulant "coupé"

1

Niveau 10

04 décembre 2019 à 16:55:42

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 :

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 8px 8px;
margin-bottom:8px;
}

menu-demo2 ul li{

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

menu-demo2 ul li:hover{

border-radius:8px 8px;
}

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: #600103;
background-image:-webkit-linear-gradient(top, #600103 0%, #600103 100%);
background-image:linear-gradient(to bottom, #600103 0%, #600103 100%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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%);
}

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 */

menu-demo2 li:first-child li{

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

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

background:#600103;
}

menu-demo2 li:last-child li{

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

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}

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

background:#b77b7c;
}
/* 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;
}

Niveau 29

04 décembre 2019 à 17:36:54

Qu'y a t-il ici ?

Niveau 3

04 décembre 2019 à 22:13:19

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)

Niveau 10

06 décembre 2019 à 15:24:01

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 .

Niveau 10

06 décembre 2019 à 17:08:29

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.

Niveau 10

07 décembre 2019 à 21:06:14

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

Pseudo supprimé

Niveau 7

19 janvier 2020 à 00:01:20

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

Niveau 7

28 janvier 2020 à 17:59:17

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

1

Sujet : [Besoin d'aide] Sous menu déroulant "coupé"

Retour haut de page

La sélection vidéo du moment

Des extraterrestres, nommés Naytibas, ont attaqué la Terre anéantissant la quasi-totalité des êtres humains. Par chance, certains ont pu s’enfuir dans des colonies spatiales. Parmi eux, des scientifiques ont mis au point des androids destinés au combat pour pouvoir reprendre le contrôle de la planète bleue.

Consulter la version web de cette page