Menu impossible de cliquer sur les sous onglet.
Résolu
Defenderdu05
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
Defenderdu05 Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
Defenderdu05 Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
Bonjour a tous,
j'ai crée un menu avec des onglet déroulant.
tous vas bien quand je passe ma souris sur les onglet principaux les onglet secondaire apparaisse mais des que j enlève ma souris de l'onglet principale les sous onglet disparaisse il est alors impossible de cliquer dessus
j'ai crée un menu avec des onglet déroulant.
tous vas bien quand je passe ma souris sur les onglet principaux les onglet secondaire apparaisse mais des que j enlève ma souris de l'onglet principale les sous onglet disparaisse il est alors impossible de cliquer dessus
3 réponses
Salut,
Ton html n'est pas syntaxiquement correct : une balise ul ne peut contenir que des balises li en tant qu'enfant direct. Ta balise h2 ne devrait donc pas être un enfant direct de la balise ul.
Tu peux trouver un début de correction ici : https://jsfiddle.net/k34xunh3/
Les modifications effectuées à partir de ton code :
- suppression de la balise h2
- ajout d'une classe sous-menu sur les balises ul
- remplacement des règles css appliquées sur les h2 sont désormais appliquées sur la classe sous-menu
- dans la règle css nav li:hover .sous-menu (anciennement nav li:hover h2) :
ajout d'un point virgule après "top: 100%;", ajout d'un "width: 100%;" et d'un "background-color: green;" pour mieux distinguer les éléments des sous menus
Bonne journée,
Ton html n'est pas syntaxiquement correct : une balise ul ne peut contenir que des balises li en tant qu'enfant direct. Ta balise h2 ne devrait donc pas être un enfant direct de la balise ul.
Tu peux trouver un début de correction ici : https://jsfiddle.net/k34xunh3/
Les modifications effectuées à partir de ton code :
- suppression de la balise h2
- ajout d'une classe sous-menu sur les balises ul
- remplacement des règles css appliquées sur les h2 sont désormais appliquées sur la classe sous-menu
- dans la règle css nav li:hover .sous-menu (anciennement nav li:hover h2) :
ajout d'un point virgule après "top: 100%;", ajout d'un "width: 100%;" et d'un "background-color: green;" pour mieux distinguer les éléments des sous menus
Bonne journée,
Bonjour,
Heu.... si tu ne montres pas le code incriminé ... personne ne pourra t'aider.
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Heu.... si tu ne montres pas le code incriminé ... personne ne pourra t'aider.
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
<nav> <ul> <li class="menu-pr"><a href="aceuille.php">aceuille</a> <ul><h2> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> </h2></ul> </li> <li class="menu-pr"><a href="news.php">news</a> <ul><h2> <li><a href="#">#1</a></li> <li><a href="#">#1</a></li> <li><a href="#">#1</a></li> <li><a href="#">#1</a></li> </h2></ul> </li> </ul> </nav>
<br>
body{
font-family: 'Source code pro', Calbri, serif;
margin: 0px;
padding: 0px;
}
nav{
width: 100%;
background-color: #424558;
}
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 li{
list-style-type: none;
}
h2{
display: none;
opacity: 0.80;
}
nav a{
display: inline-block;
text-decoration: none;
}
nav li:hover h2{
display: inline-block;
position: absolute;
top: 100%
left: 0px;
padding: 0px;
z-index: 1000;
}
.menu-pr:hover{
border-top: 5px solid#e44d26;
background-color: rgba(228, 77, 38, 0.15);
}
h2 li:hover a {
color: #EEE;
font-weight: bold;
}
.submenu{
display: none;
color: black;
}
h1{
width: 100%;
height: 150px;
background-color: #424558;
color: white;
font-size: large;
line-height: 150px;
text-align: center;
font-family: cursive;
border-radius: 3px;
opacity: 0.80;
}
.entet{
width: 100%;
height: 150px;
background-color: #424558;
color: white;
font-size: large;
line-height: 150px;
text-align: center;
font-family: cursive;
border-radius: 3px;
opacity:0.80;
}
je souhaite te remercier pour ton aide avec le petit lien géniale !!!
Merci, bonne journée
Cordialement Slevu.