Discussion :

[JefReb]

Bon, je fais un blocage sur un menu horizontal avec des flèches et 3 niveaux.
Sûr, que ça va sauter aux yeux de certains, mais malgré tous mes essais, j'ai l'intellect qui flanche.

https://codepen.io/JefReb/pen/POBwZL

Lorsque je survole le sous-niveau 3 la flèche du sous-niveau 2 reste bleu clair alors qu'elle devrait passer au bleu foncé comme au survol su 1er niveau.
Une petite aide s'impose ... merci d'avance

[Invité]

Bonjour,

1- met la flèche sur le a, pas sur le li.

2- attention à ne pas copier-coller n'importe quoi (indice : dans le code HTML)

[JefReb]

Merci Jerome, mais cela fait la même chose.
J'ai simplifié et je suis partie sur la base des exercices avec Laurent.

https://codepen.io/JefReb/pen/ooMwjx

Le problème existe uniquement lorsque l'on passe sur le niveau3 du premier li de niveau 2, la flèche reste bleu clair au lieu de passer bleu foncé. (janvier et février de cession1)
Alors que c'est correct partout ailleurs.
J'ai beau chercher, je ne vois pas la solution.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav > ul > li ul li:first-child > a::before  {
	content: '';
	position: absolute;
	left: 10px;
	top:-6px;
	border-style: solid;
	border-width: 0 6px 10px 6px;
	border-color: transparent transparent #001847;	/* bleu foncé */
}
nav > ul > li ul li:first-child:hover > a::before {
	border-color: transparent transparent #7db6d9;	/* bleu clair */	
}
nav > ul > li ul ul li:first-child > a::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 10px;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent #001847 transparent;	
}
nav > ul > li ul ul li:first-child:hover > a::before {
	border-color: transparent #7db6d9 transparent;	
}

[Invité]

OK.
Je t'explique...

1- li:hover = "au survol du <li>"
SAUF QUE.... le curseur est sur le <li> du niveau 3.... qui est lui-même CONTENU dans le <li> du niveau 2 !
Le li:hover concerne alors les DEUX <li> ! (et même le li parent niveau 1)
Ce qui explique pourquoi les 2 flèches s'allument.

2- C'est pourquoi je t'ai dit de mettre la flèche sur le <a>, pour qu'elle ne s'allume QUE au survol du <a> sur lequel se trouve le curseur.

DONC ce n'est pas li:hover > a::before qu'il faut écrire, mais li > a:hover::before.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
nav > ul > li ul li:first-child > a:hover::before {
	border-color: transparent transparent #7db6d9;	/* bleu clair */	
}

CQFC !
(Ce Qu'il Fallait Coder)

3- <a href="javasript:void();return false;"> : rien ne te choque ?

4- Attention à la version "PHONE" de ton menu... (min-width: 80px;, ce n'est pas assez).

[JefReb]

Arrrggg! Merci Jérôme, oui c'est très très clair.
Je pleure, moi qui pensais commencer à bien maîtriser le menu horizontal.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav > ul > li ul li:first-child > a::before  {
	content: '';
	position: absolute;
	left: 10px;
	top:-6px;
	border-style: solid;
	border-width: 0 6px 10px 6px;
	border-color: transparent transparent #001847;	/* bleu foncé */
}
nav > ul > li ul li:first-child > a:hover::before {
	border-color: transparent transparent #7db6d9;	/* bleu clair */	
}
nav > ul > li ul ul li:first-child > a::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 10px;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent #001847 transparent;	
}
nav > ul > li ul ul li:first-child > a:hover::before {
	border-color: transparent #7db6d9 transparent;	
}

3) oui bien sûr j'ai tout de suite vu la correction à faire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:void();return false;">

4) oui c'est un oublie, mais je ne visais pas le phone. merci de me l'avoir signalé ...

[NoSmoking]

Bonjour,
dans un menu, à mon avis, on devrait toujours savoir/connaitre le chemin, le « fil d'ariane », du sous-menu que l'on va choisir. Ceci entraine que l'on devrait garder la surbrillance en amont.

[Invité]

Bonjour,

je suis d'accord avec NoSmoking (c'est d'ailleurs comme ça dans les scripts que j'ai proposés).
Après... c'est au choix de chacun.

JefReb, ça se fait très simplement à partir de ton script précédent : https://codepen.io/JefReb/pen/ooMwjx
Il suffit de remplacer :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav  a:hover {
	background: #7db6d9;
	text-decoration: underline;
}

par :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav li:hover > a {
	background: #7db6d9;
	text-decoration: underline;
}

Les <a> s'allument à travers la "cascade" des <li> concernés par le survol (:hover).

On peut même s'amuser avec une 3ème couleur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
nav li:hover > a:not(:hover) {
	background: #045FB4;
}
nav li > a:hover {
	background: #7db6d9;
	text-decoration: underline;
}

[JefReb]

Super, mille merci, mais ... il me semble que l'on n'obtienne pas du tout le même rendu.
https://codepen.io/JefReb/pen/ooMwjx
et
https://codepen.io/JefReb/pen/xParLb

Même si ce dernier indique mieux le chemin utilisé.

[Invité]

Euhhh..... Ben oui, c'est le principe...

[NoSmoking]

Précision :

Ceci entraine que l'on devrait garder la surbrillance en amont.

peut n'être que sur le texte pas forcément le fond survolé, c'est pour accrocher l'oeil.