Menu multi-niveaux - flex

Invité · 22/11/2017, 22h22

Envoyé par laurentSc

Difficile d'y voir un jeu alors que je cherche à apprendre...

Là, tu as tout faux : les enfants apprennent en jouant.
Et ensuite... on apprend tous les jours... chaque jour de la vie...

Les japonais n'ont qu'UN SEUL mot pour "intéressant" et "amusant" : omoshiroi.

Invité · 22/11/2017, 22h24

From JefReb (en MP) :

" Bonjour Jérôme,
Je continue et je suis désolé de ne pas avoir suivi strictement tes rêgles quant au font ou autres.
Mais je comprends et j'ai remis mes pages sur mon établis.
Je dois dire que je n'avais pas vu et lu tes corrections pour 1, 2, 3, et 4 avant.
Et je n'utilise pas tab-cell mais flex.
J'ai juste corrigé avec le truc de flex:1 1 1%; qui ne s'invente pas.
J'ai évidemment trouvé des redondances et corrigé ... hélas!

Toutefois, avec l'exercice 4, j'ai toujours le problème de fuite quand inférieur à 640px et je viens de m'apercevoir que tes solutions en 5 et 6 ont le même problème.
Tu as bien le niveau A, mais dès que tu veux pointer sur B C ou D cela fuit et ne marche pas.
Voici mes corrections en Flex-box:
exo1 https://codepen.io/JefReb/pen/rYvmWR
exo2 https://codepen.io/JefReb/pen/wPjdgP
exo3 https://codepen.io/JefReb/pen/vWjmmy

Je continue a chercher pour la suite...
N'abandonne pas, svp, j'aime beaucoup cette approche et j'apprends encore beaucoup.
Merci "

Invité · 22/11/2017, 22h35

@JefReb :

Que veux-tu dire par "problème de fuite", "cela fuit" ?
Je ne comprends pas.

**JefReb** · 23/11/2017, 08h41

J'appelle "fuite", c'est le mot le plus approprié pour expliquer le phénomène.

C'est souvent le cas avec un z-index manquant sur un ul en absolute et un menu horizontal.
Je vais tenté d'expliquer plus clairement.
Dans ton codepen pour l'exo6 (https://codepen.io/jreaux62/pen/eeMmxx)
lorsque tu mets ton navigateur en 640px de large pour simuler un petit écran, il est impossible d'atteindre B,C ou D SAUF si tu commences par le bas en remontant.

Je viens de revérifier et il y a un problème de fuite si on commence par le haut.
tu pointes le A et il développe le 2ème niveau, tu descends il développe le 3ème niveau, puis tu veux atteindre le B et hop ... le curseur revient sur le A ... d'où expression fuite.

**JefReb** · 23/11/2017, 09h59

J'ai repris en faisant phone first comme tu le demandais et à partir de l'exercice 5 pour rattraper le forum ... mais j'utilise flex et non tab-cell
Exercice 6:
https://codepen.io/JefReb/pen/LOmJgv

Mais j'ai toujours ce problème de fuite lorsque width < 640px

Invité · 23/11/2017, 11h24

Bonjour,

Si je comprends bien, c'est le fait que le sous-menu se développe "au survol" (hover) qui devient gênant, dès lors que les menu et sous-menu sont à la vertical.

Je n'ai traité cette exemple que pour laurentSc... qui ne maîtrise pas jQuery et "veut comprendre"...

Pour ma part, ça fait longtemps que j'utilise des menus "au clic" (géré via jQuery).
D'autant plus que hover pose problème sur écran tactile.

Mais on pourra voir ça plus tard, OK ?

**JefReb** · 23/11/2017, 13h01

Je revenais sur le forum pour dire que j'avais compris le problème et que seul un menu vertical au clic résolvait ce problème au demeurant normal.
J'ai même essayé d'utiliser une transition sur la hauteur, mais cela fait évidement pareil. Donc Jquery ...

Par contre, sur un menu horizontal il y a parfois des "fuites" sur les menus de niveau 3 ou 4, et c'est souvent dû à l'absence d'un z-index sur l'ul en absolute

Invité · 23/11/2017, 18h20

Bonjour JefReb,

petite correction sur ton code 6 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#navMain > ul ul {
	width:100%;
	position: absolute;
	top: 100%;
	left: 0;
}
/*=========== Position à droite du niveau 3 ============*/
#navMain > ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

Le 2ème position: absolute; est redondant (si tu l'enlèves, tu constates que rien ne change)
C'est déjà défini dans #navMain > ul ul {.
D'ailleurs, on peut aussi simplement écrire ici : #navMain ul ul {.

Invité · 23/11/2017, 19h20

Exercice 7 :

Ajouter la class "hasSub" au sous-menu "A - 2" (qui possède un sous-menu)
Ajouter la flèche pour ce sous-sous-menu.
~~la positionner à GAUCHE dans le sous-menu (et plus à droite)~~ (ERREUR de ma part ! c'est pour l'exercice suivant !)
la faire pointer vers la DROITE (indice : -90deg)
:hover : la faire pointer vers la GAUCHE (indice : 90deg)

Solution Exercice 7 : https://codepen.io/jreaux62/pen/WXzvey

class "hasSub" au sous-menu

Code html :

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

        <li class="hasSub">

Ensuite, ça concerne DESKTOP

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
/* TABLET + DESKTOP -(plus de 640px)  */
@media screen and (min-width: 641px) {
  /*.......... */
 
  /* flèche (pour menu avec sous-menu niveau 3) */
  #navMain ul ul li.hasSub:after {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); /* orientée vers la droite */
  }
  #navMain ul ul li.hasSub:hover:after {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); /* orientée vers la gauche */
  }
}

**JefReb** · 24/11/2017, 16h22

Effectivement je pouvais encore simplifier.
J'ai corrigé et fini l'exercice n°7, mais j'attends un peu que Laurent se manifeste. Je ne vois plus de post de sa part ...
Il continue? Ce serait dommage qu'il arrête.
A plus tard.

**laurentSc** · 24/11/2017, 18h07

T'inquiète JefReb, j'ai pas abandonné. Si je ne manifeste pas beaucoup, c'est que je n'ai pas beaucoup de temps à consacrer au sujet. Comme déjà dit, j'ai vu que Jérôme avait commencé à donner des solutions mais avant de regarder son code, j'essaye de le faire moi-même (puis je regarde les solutions pour apprendre !). Pour l'instant, je n'ai fait que les 3 1ers exercices !

**laurentSc** · 24/11/2017, 22h12

Bonsoir,
je coince sur l'exercice 4 et même la solution de Jérôme ne me suffit pas pour corriger !

https://codepen.io/laurentsc/pen/JOZmyQ

Code html :

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
25
<nav id="navMain">
  <ul>
    <li>
      <a href="#">A - One</a>
      <ul>
        <li>
          <a href="#">A - 1</a>
        </li>
        <li>
          <a href="#">A - 2</a>
        </li>
        <li>
          <a href="#">A - 3</a>
        </li>
        <li>
          <a href="#">A  - 4</a>
        </li>
      </ul>
    </li>
    <li>
    <li><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
* { 
  margin:0; 
  padding:0; 
  border:0; }
html, body { 
  font-family:Arial,sans-serif; 
  font-size:100%; }
 
#navMain a {
  display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
  padding:10px;
  font-family:Arial, sans-serif;
  color: #fff;
  background: #2980b9;
  text-decoration: none; /* ne pas souligner les liens */
}
 
 
#navMain a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 /* MENU */
#navMain ul,
#navMain li {
  list-style: none;
}
/* ------------------------------- */
 
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles  */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 100%  */
@media screen and (min-width: 641px) 
{
  #navMain > ul {/* slt niveau 1 */
    display:table; /* se comporte comme une table */
    width:50%; /* largeur du menu */
    margin:0 auto;/* centrage. Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.*/
    min-width:640px;
  }
  #navMain > ul > li { 
    display:table-cell; /* se comporte comme une cellule de table */
    width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
  }
  #navMain ul li {/* on positionne le parent des niveau 2 pour que le position de l'enfant soit pris en compte */
  position:relative;
}
#navMain ul ul {/* menus de niveau 2*/
  position:absolute;
  display:none;
  } 
#navMain ul ul a {
   background:#333;
  }
  #navMain ul li:hover > ul {
  display:block;/*on affiche menu niveau 2 au survol */
}
}

Les problèmes :
- j'arrive pas à enlever les puces du sous-menu malgré les lignes 23 à 26
- écart entre les menus A et B

une question : pourquoi ligne 53 on doit mettre un a alors que le sous-menu dont on veut fixer la couleur de fond, c'est le <ul> ?

Invité · 24/11/2017, 22h59

Bonjour,

1- je ne vois pas de puce

2- erreur dans ton code html

3- les ul n'ont pas de couleur de fond. Les a, si.
Mais tu n'as pas tout-à-fait tord : on aurait pu définir une couleur de fond pour les ul... mais ça n'a pas d'intérêt ici.

**JefReb** · 25/11/2017, 08h21

Jerome, sans vouloir te vexer, c'est toi qui a mis l'erreur dans le code html dans un des post (115) pour l'exercice.
Je l'avais vu car elle me provoquait des erreur mais j'ai oublié de te le signaler.
Cela m'avait fait galérer et je suppose que Laurent a le même problème.

Invité · 25/11/2017, 08h57

C'est bien pour ça que j'ai dit de ne pas copier-coller bêtement.

Vous tombez dans le moindre piège qu'on vous tend (volontairement ou pas).
Et je n'ai jamais prétendu que mon code était le meilleur, ni le seul possible.

A vous de faire preuve d'initiative, et de curiosité.

N.B. <li> en trop dans le code HTML :
Je vais néanmoins expliquer pourquoi je n'avais pas d'erreur (visuellement) dans mes codes, alors que vous oui :

Moi, je n'avais pas mis width:1%; ici :

Code css :

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

1
2
3
4
  #navMain > ul > li { /* uniquement le niveau 1 */
    display: table-cell; /* se comporte comme une cellule table */
    width:1%;
  }

SANS width:1%;, le <li> vide prend une largeur nulle. On ne le voit pas.
AVEC width:1%;, le <li> vide prend une largeur non nulle, donc VISIBLE à l'écran. Donc, on peut prendre l'INITIATIVE de CORRIGER ! (ça m'a pris 10 secondes pour voir d'où venait le problème...)

Pour moi, cette erreur n'était pas VISIBLE à l'écran !
PAR CONTRE, si j'avais inspecté * le code HTML généré (clic droit -> "Code Source" ou "Ctrl"+"U"), j'aurais vu qu'il y a une erreur (coloration en rouge : "<li> ouvert, mais pas de balise de fermeture").
(* pas dans codepen, mais dans une page à part)

Je viens de corriger tous mes codes..... ET VOUS ?

Invité · 25/11/2017, 09h52

Exercice 8 :

Ajouter un sous-menu et un sous-sous-menu au menu "D"(le dernier)
Reprendre les exercices précédents, mais comme c'est le DERNIER du menu, le sous-sous-menu doit s'afficher À GAUCHE de son parent
on change aussi le sens des flèches pour ce DERNIER menu : pointant à GAUCHE, et au survol à DROITE
la positionner à GAUCHE dans le sous-menu (et plus à droite)

Solution Exercice 8 : https://codepen.io/jreaux62/pen/MOVwKx

Code html :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<nav id="navMain">
....
    <li class="hasSub">
      <a href="#">D - Four</a>
      <ul>
        <li>
          <a href="#">D - 1</a>
        </li>
        <li class="hasSub">
          <a href="#">D - 2</a>
          <ul>
            <li>
              <a href="#">D - 2.1</a>
            </li>
            <li>
              <a href="#">D - 2.2</a>
            </li>
            <li>
              <a href="#">D - 2.3</a>
            </li>
            <li>
              <a href="#">D - 2.4</a>
            </li>
            <li>
              <a href="#">D - 2.5</a>
            </li>
            <li>
              <a href="#">D - 2.6</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">D - 3</a>
        </li>
        <li>
          <a href="#">D - 4</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

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
  /* DERNIER MENU (niveau 1) : */
  /* on affiche le sous-sous-menu (niveau 3) à GAUCHE, on inverse le sens des flèches */
  #navMain > ul > li:last-child > ul li.hasSub:hover > ul {
    top: 0;
    left: -100%; /* A GAUCHE du niveau 2 */
  }
  #navMain > ul > li:last-child > ul li.hasSub:after {
    left: 2px; /* positionné à gauche dans le sous-menu */
    right: auto; /* on doit annuler la directive précédemment indiquée : right: 10px; */
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #navMain > ul > li:last-child > ul li.hasSub:hover:after {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

Exercice 10 : a été traité dans ce message.

Code css :

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

1
2
3
4
5
6
7
8
/* menu niveau 1 : horizontal */
#navMain ul {
  display: -webkit-flex; display: flex;
 
}
#navMain li {
  -webkit-flex: 1 1 1%; flex: 1 1 1%; /* 1% : astuce pour que tous aient la même largeur */
}

Invité · 25/11/2017, 10h06

Un dernier mot (?) :

Pour les écrans TACTILES : il faut désactiver les liens des menus AVEC sous-menu.
Car hover et clic se confondent.

Code HTML :

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

1
2
3
4
    <li class="hasSub">
      <a href="javasrcipt:void();return false;">A - One</a>
      <ul>
        <li>

Voici une solution plus complète : https://codepen.io/jreaux62/pen/gXweLY
Si vous avec des questions....

N.B. Menu "au clic" (en JavaScript/jQuery) : https://codepen.io/jreaux62/pen/dPxKKQ
Ca pourra faire l'objet d'une nouvelle discussion, si ça vous intéresse...

**JefReb** · 25/11/2017, 11h43

Jérome, je suis, bien sûr, très intéressé par le menu "au clic".
Et je n'ai pas attendu pour essayer de comprendre les exemples que tu as déjà donné dans ce foruym.
Toutefois, je n'ai jamais investi dans le javascript et je n'ai pas cherché à programmer.
Sûr, je sais reconnaître et modifier le nom de classe ou d'id, mais écrire ou modifier une fonction c'est déjà plus délicat.
Mais je sais utiliser JQuery, pour l'avoir déjà utilisé, et cela facilement en utilisant les fonctions déjà prêtes.
Donc oui, si tu démarres des exercices comme le menu horizontal et vertical présent, je suis partant.
Cela devient d'ailleurs très intéressant, et notamment pour les débutants. Il faudrait presque un forum "à part" afin que les solutions ne soient pas trop visibles facilement.

bon en attendant et suivant toutes tes recommandations voici l'exercice 8 en Flex que j'ai fait:
https://codepen.io/JefReb/pen/RjBwNV

à noter, que j'utilise

Code css :

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

li:nth-last-child(-n+1)

au lieu de

Code css :

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

li:-last-child

ce qui permet aussi de cibler facilement l'avant dernier avec

Code css :

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

li:nth-last-child(-n+2)

sans ajouter du code ...

**laurentSc** · 25/11/2017, 12h33

Envoyé par jreaux62

Vous tombez dans le moindre piège qu'on vous tend (volontairement).

c'est pas très gentil

...
et en plus, tu récidives au post #137 <a href="javasrcipt:void();return false;">Bon, comme, de même, le bug n'était pas tout le temps visible (selon le CSS), je n'avais pas pensé à regarder le html.

Pareil, ce matin, je vois plus la puce

Merci pour l'explication de la couleur de fond sur les a et pas les ul.

L'exercice 4 est au point (mais plus dispo aujourd'hui (sauf peut-être en fin d'après-midi mais pas ce soir (ni demain matin !))

Moi aussi, intéressé par le menu au clic/jQuery, mais contrairement à JefReb, si je connais (un tout petit peu) le js, j'ai déjà écrit des fonctions mais jamais utilisé le jQuery. Ton menu, c'est un peu lourd à appréhender ; Est-ce que tu peux y aller pas à pas ?

Invité · 25/11/2017, 13h29

@JefReb
Correction Exercice 8

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
html, body {
	font-family: Arial, sans-serif;
	fonts-size: 100%;
	font-size: 100%;
}
/*=========== définition commune =======================================*/
#navMain ul, #navMain li {
	list-style-type: none;
}
#navMain a {
	width: 100%;
	display: block;
	padding: 10px 15px;
	background-color: #2980b9;
	color: #fff;
	text-decoration: none;
}
#navMain li li a {
	background: #333;
}
#navMain a:hover {
	background: #20638f;
	text-decoration: underline;
}
#navMain > ul ul {
	display: none;
}
#navMain li:hover > ul {
	display: block;
}
/*=========== mise en place d'une flèche ====================*/
/*======= On cible tous les niveaux         =================*/
#navMain li.hasSub:after {
	position: absolute;
	content: "\25BC";
	font-size: 16px;
	color: #fff;
	top: 10px;
	right: 10px;
}
#navMain li.hasSub:hover::after {
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
#navMain li li li a {
	background: #444;
}
/*======================================================*/
/*=============== Pour phone et < 640px  ===============*/
/*======================================================*/
@media screen and (max-width: 640px) {
#navMain ul, #navMain li {
	position: relative;
	top: 0;
	left: 0;
}
#navMain ul ul > li.hasSub::after {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#navMain ul ul > li.hasSub:hover::after {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
}
/*======================================================*/
/*=============== Pour desktop et >640px ===============*/
/*======================================================*/
@media screen and (min-width: 641px) {
/*==== Utilisation de flex pour rendre horizontal ======*/
#navMain > ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;		/* centrons le texte */
}
#navMain > ul > li {
	-webkit-flex: 1 1 1%;
	flex: 1 1 1%;
}
#navMain > ul {
	width: 50%;
	min-width: 640px;
	margin: 0 auto;
}
/*================= Définition du niveau 2 ==============*/
#navMain li {
	position: relative;
	min-width: 180px;
}
#navMain > ul ul {
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
}
/*=========== Position à droite du niveau 3 ============*/
#navMain > ul ul ul {
	top: 0;
	left: 100%;
}
/*========= Orientation horizontal de la flèche ========*/
#navMain ul ul > li.hasSub::after {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#navMain ul ul > li.hasSub:hover::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
/*========  je cible  le dernier ===========================*/
/* :nth-last-child(-n+1) = :last-child =====================*/
#navMain > ul > li:nth-last-child(-n+1) ul ul {
	left: -100%;
}
#navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub:hover::after {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}/* Décalons à gauche la flèche*/
#navMain > ul ul a {
	padding-left: 40px;
}
#navMain > ul > li:nth-last-child(-n+1) li.hasSub:after {
	right: auto;
	left:10px;
}
}

1- ligne 9 : enlève fonts-size: 100%; (ça n'existe pas)

2- ligne 14 : regarde la différence entre list-style-type et list-style.

3- ligne 18 : enlève width: 100%; ici :

Code css :

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

1
2
3
#navMain a {
	width: 100%;
	display: block;

A partir du moment où c'est en display:block; PAR DEFAUT la largeur est 100%;

4- ligne 47 : il manque la couleur jaune des flèches au survol

5- lignes 59 à 71 : REDONDANTES et/ou inutiles (TOUT à enlever). Pourtant, je l'ai dit et expliqué.

6- regarde la "Compatibilité des navigateurs" de transform pour savoir quels préfixes sont nécessaires.

Et je crois que c'est tout...

QUESTION SUBSIDIAIRE :

PAR QUOI peut-on REMPLACER ce bout de code, SANS utiliser transform:rotate ? (indice : caractères unicode)

Code css :

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

1
2
3
4
5
 #navMain li.hasSub:hover::after {
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

Idem pour :

Code css :

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

1
2
3
4
5
6
7
8
#navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub:hover::after {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager