Menu impossible de cliquer sur les sous onglet.

Résolu/Fermé
Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016 - 5 juin 2016 à 09:53
Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016 - 7 juin 2016 à 17:55
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

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 7/06/2016 à 15:06
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 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
7 juin 2016 à 17:55
Salut Pitet,
je souhaite te remercier pour ton aide avec le petit lien géniale !!!

Merci, bonne journée

Cordialement Slevu.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
6 juin 2016 à 00:38
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 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
6 juin 2016 à 07:13
Salut,
En effet, je fais le faire ce soir sur mon ordinateur.

--
0
Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
6 juin 2016 à 21:05
je vais recrée un topique.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
6 juin 2016 à 21:12
Pourquoi ?
Continue ici.
0
Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
6 juin 2016 à 21:13
ok
0
Defenderdu05 Messages postés 18 Date d'inscription mercredi 17 décembre 2014 Statut Membre Dernière intervention 9 octobre 2016
6 juin 2016 à 21:14
<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