Menu impossible de cliquer sur les sous onglet.

Résolu
Defenderdu05 Messages postés 19 Statut Membre -  
Defenderdu05 Messages postés 19 Statut Membre -
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

3 réponses

Réponse 1 / 3
Pitet Messages postés 2845 Statut Membre 527
 
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,
2
Defenderdu05 Messages postés 19 Statut Membre
 
Salut Pitet,
je souhaite te remercier pour ton aide avec le petit lien géniale !!!

Merci, bonne journée

Cordialement Slevu.
0
Réponse 2 / 3
jordane45 Messages postés 40050 Statut Modérateur 4 756
 
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

0
Defenderdu05 Messages postés 19 Statut Membre
 
Salut,
En effet, je fais le faire ce soir sur mon ordinateur.

--
0
Defenderdu05 Messages postés 19 Statut Membre
 
je vais recrée un topique.
0
jordane45 Messages postés 40050 Statut Modérateur 4 756 > Defenderdu05 Messages postés 19 Statut Membre
 
Pourquoi ?
Continue ici.
0
Defenderdu05 Messages postés 19 Statut Membre
 
ok
0
Réponse 3 / 3
Defenderdu05 Messages postés 19 Statut Membre
  
<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;
}
0

Discussions similaires

Onglet disposition Excel ne s'affiche pas
dsqalli -
Raymond PENTIER -

5 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
L'onglet Disposition pour les tableaux dans Word 2019
sucharbo -
sucharbo -

2 réponses
Excel : l'onglet Création (Outils de tableau) n'apparaît pas !
elise -
GrosseTruie -

3 réponses
Firefox: à l'affichage d'un onglet :" Zut, l'onglet a planté
janpolon -
janpolon -

2 réponses