Ajouter un niveau au menu

**apdf1** · 30/10/2017, 08h15

Bonjour,

J'ai un menu auquel je recherche un code pour rajouter un niveau.
Voici mon code:

Code :

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
<title>Un menu vertical </title>
 
                              <style>
                            body{background: #000;}
                            #menu
                            { position: absolute;top: 80px;width:0;
                            }
                            #menu li
                            {position:relative;list-style:none;
                            }
                            #menu > li
                            {margin:0 0 25px 0;height:80px;left:-30px;font-size: 12px;
                            }
                            #menu > li > a 
                            {position:relative;display:inline-block;height:0px;width:0px;background-color:green;left:-35px;top:15px;
                            }
                            #menu > li > a span 
                            {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);writing-mode: lr-tb;display:inline-block;background-color:#171515;text-align:center;color:red;/*police titre*/padding:10px 10px;width:80px;
                            }
                            #menu > li > ul
                            {position:absolute;display:none;top:-17px;left:0px;
                            }
 
                            #menu > li:hover > ul
                            {display:block;clear:both;
                            }
                            #menu > li > ul > li
                            {
                            }
                            #menu > li > ul > li > a
                            {display:inline-block;width:120px;background-color:#000;color:white;/*police hover*/padding:2px 10px;margin:2px 0 0;text-decoration:none;
                            }
                            #menu > li > ul > li:hover > a
                            {background-color:red;/*fond hover*/
                                color:#ffffff;/*police hover passage curseur*/
                            }
 
</style>
 
</head>
<body>
 
<main>        
<div id="menu">
 
    <ul id="menu">
            <li><a href="..."><span>Afrique</span></a>
                <ul>
              <li class="sous-menu"><a href="Afrique_du_Sud.html">Afrique du Sud</a></li>
              <li class="sous-menu"><a href="Algérie.html">Algérie</a></li>
              <li class="sous-menu"><a href="Angola.html">Angola</a></li>
              <li class="sous-menu"><a href="Bénin.html">Bénin</a></li>
              <li class="sous-menu"><a href="Botswana.html">Botswana</a></li>
              <li class="sous-menu"><a href="Burkina_Faso.html">Burkina Faso </a></li>
              <li class="sous-menu"><a href="Burundi.html">Burundi </a></li>
              <li class="sous-menu"><a href="Cameroun.html">Cameroun </a></li>
              <li class="sous-menu"><a href="Cap-Vert.html"> Cap-Vert</a></li>
              <li class="sous-menu"><a href="République_centrafricaine.html">République centrafricaine </a></li>
 
 
                </ul>
            </li>
 
        </ul>
 
  </div> </main>

Je vous remercie de votre aide

Cordialement

Max

**apdf1** · 30/10/2017, 11h45

Bonjour,

Dans mon menu j'ai deux niveaux, le 1er "Continent" le second les "Pays"du continent, j'aimerais avoir un troisième niveau en relation avec les pays

Voila alors j'ai fait ceci qui me parait pas mal.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
       <li><a href="..."><span>Europe</span></a>
                <ul class="scrollbar"id="style-2" >
 
  <li class="sous-menu"><a href="Albanie.html">Albanie </a>
 
               <ul class="rang3">
                            <li><a href="#">Hauts de france</a></li>
							<li><a href="#">Sous-menuxxx 4.1.2</a></li>
							<li><a href="#">Sous-menuxxx 4.1.3</a></li>
 
                    </ul>  </li>   
 
    </ul></li>

Le problème est que je n'arrive pas à configurer le Css.

Je vous remercie de votre aide

Max

**JefReb** · 31/10/2017, 09h20

Voici un code qui fonctionne, même pour encore un autre niveau supplémentaire sans rajouter du css.
Toutefois, c'est le premier niveau vertical qui me pose un problème et comme cela m'intéresse je suis en train de chercher.
Mais tout de suite voici une solution.
J'essaye toujours de simplifier en utilisant les balises html5 (<nav> ) et en évitant au maximum l'utilisation de classe.
Comme tu peux le voir c'est très facile.

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav > ul {
	width: 20px;
}
nav ul {
	list-style-type: none;
	padding: 0;
 
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
/*	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;*/
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}
nav li {
	position: relative;
}
nav li ul {
	position: absolute;
	left: 80px;
	top: -2px;	
}
nav li {
	border-top: 2px solid transparent;
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

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
<main>
  <nav>
    <ul>
      <li><a href="...">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>
          <li><a href="#">Algérie</a></li>
          <li><a href="#">Angola</a></li>
          <li><a href="#">Bénin</a></li>
          <li><a href="#">Botswana</a></li>
          <li><a href="#">Burkina Faso </a></li>
          <li><a href="#">Burundi </a></li>
          <li><a href="#">Cameroun </a></li>
          <li><a href="#"> Cap-Vert</a></li>
          <li><a href="#">République centrafricaine </a></li>
        </ul>
      </li>
      <!--==========================================-->
      <li><a href="...">Europe</a>
        <ul>
          <li><a href="#">Albanie </a>
            <ul>
              <li><a href="#">Hauts de france</a></li>
              <li><a href="#">Sous-menuxxx 4.1.2</a></li>
              <li><a href="#">Sous-menuxxx 4.1.3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <!--============================================-->
    </ul>
  </nav>
</main>

Pour l'instant je cherche pour le premier niveau vertical. Si tu as la réponse, n'oublie pas de la mettre dans le forum pour que tous en profite.

**JefReb** · 31/10/2017, 09h57

Bon je pense avoir trouvé, mais il est peut être possible de simplifier le vertical.
(J'espère que Jreax62 ne dira pas que c'est une usine à gaz ...

Voir: https://codepen.io/JefReb/pen/eeNJQV

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav > ul {
	/*width: 20px;*/
}
nav ul {
	list-style-type: none;
	padding: 0;
 
}
nav li {
	position: relative;
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
	position: relative;
	left: -35px;
	top: 15px;
	display: inline-block;
	height: 0px;
	width: 0px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}
nav li ul {
	position: absolute;
	left: 120px;
	top: -2px;
	z-index:999;
}
nav > ul > li > ul {
	left: 18px;	
}
nav li {
	border-top: 2px solid transparent;
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

**apdf1** · 31/10/2017, 11h28

Salut JefReb

Super! je pense que je ferais avec sa.
Je vais voir avec tous les pays si sa tombe bien et je te tiens courant

Je te remercie beaucoup et si tu trouve autre chose je suis preneur.

Merci et bonne journée

Max

Invité · 31/10/2017, 13h08

Bonjour,

Il faut penser à enlever (ou désactiver) les liens des menus qui ont un sous-menu.

**apdf1** · 31/10/2017, 13h51

Bonjour jreaux62,

Ha effectivement, j'avais repris le code d'apf1 sans corriger:

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
<main>
  <nav>
    <ul>
      <li><a href="#">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>
          <li><a href="#">Algérie</a></li>
          <li><a href="#">Angola</a></li>
          <li><a href="#">Bénin</a></li>
          <li><a href="#">Botswana</a></li>
          <li><a href="#">Burkina Faso </a></li>
          <li><a href="#">Burundi </a></li>
          <li><a href="#">Cameroun </a></li>
          <li><a href="#"> Cap-Vert</a></li>
          <li><a href="#">République centrafricaine </a></li>
        </ul>
      </li>
      <!--==========================================-->
      <li><a href="#">Europe</a>
        <ul>
          <li><a href="#">Albanie </a>
            <ul>
              <li><a href="#">Hauts de france</a></li>
              <li><a href="#">Sous-menuxxx 4.1.2</a></li>
              <li><a href="#">Sous-menuxxx 4.1.3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <!--============================================-->
    </ul>
  </nav>
</main>

Mais ce qui me "chagrine", c'est de ne pas arriver à simplifier le premier niveau vertical perpendiculaire.

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
nav li {
	position: relative;
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 120px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
nav > ul > li > a {
	position: relative;
	left: -35px;
	top: 15px;
	display: inline-block;
	height: 0px;
	width: 0px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	background-color: #171515;
	color: red;
	width: 80px;
	height:20px;
}

une idée? sinon tant mieux.

Invité · 31/10/2017, 16h22

Code :

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

1
2
3
      <li><a href="#">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

Justement NON : Afrique A un sous-menu -> il faut enlever le lien :

Code :

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

1
2
3
      <li>Afrique
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

ou :

Code :

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

1
2
3
      <li><a href="javascript:void(0);">Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

L'opérateur void()

**JefReb** · 31/10/2017, 16h28

NON
car dans ce cas, la balise <a> étant manquante, il n'y a plus la mise en forme css et le texte est horizontal.
donc il faut mettre:

Code html :

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

1
2
3
<li><a>Afrique</a>
        <ul>
          <li><a href="#">Afrique du Sud</a></li>

Donc il y a peut être une différence que je ne vois pas, mais le <a> est important.

**apdf1** · 01/11/2017, 08h29

Bonjour JefReb,

Je te remercie encore pour ton code. Je suis en train d'ajouter les noms au menu, après avoir essayer à plusieurs reprises j'ai des soucis pour rentrer les noms "question de largeur" Comment peut-on changer la largeur des sous menu ?

Je te remercie et te souhaite une bonne journée

Max

**JefReb** · 01/11/2017, 10h49

Ce n'est pas trop difficile, mais il faut savoir ce que l'on fait.
Si tu ne veux agrandir qu'un seul poste, cela ne va pas être très beau.
Donc tu peux changer la largeur de tous les niveaux par:

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
 
nav a {
	width: 120px;             /* ICI */
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
 
nav li ul {
	position: absolute;
	left: 120px;            /* et ICI ne pas oublier le décallage vers la droite */
	top: -2px;
	z-index:999;
}

Par contre si tu veux modifier uniquement le 3ème niveau, il faut cibler:

Code css :

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

1
2
3
nav > ul ul ul li > a {
	width:300px;
}

Exemple complet avec 2ème niveau à 150px et 3ème niveau à 300px:

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav ul {
	list-style-type: none;
	margin:0;
	padding: 0;
 
}
nav li {
	position: relative;
 
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
nav a {
	width: 150px;
	line-height: 20px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
nav > ul > li > a {
	width: 80px;
	height:20px;	
	position: relative;
	left: -35px;
	top: 15px;
	background-color: #171515;
	color: red;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);		
}
nav > ul > li {
	border-top:none;
}	
nav li ul {
	position: absolute;
	left: 150px;
	top: -2px;
	z-index:999;
}
nav > ul ul ul li > a {
	width:300px;
}
nav > ul > li > ul {
	left: 15px;	
}
nav li ul {
	border-left: 2px solid transparent;
}
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; /* pas de changement pour le premier niveau */
	color: red;
}

**JefReb** · 01/11/2017, 11h17

J'ai très mal répondu à jreaux62.
Je ne comprends pas trop la différence entre :

Code css :

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

1
2
3
4
5
6
7
8
9
 
<ul>
      <li><a>Afrique</a>
/* ===== ou ===== */
<ul>
      <li><a href="#">Afrique</a>
/* ===== et ou ===== */
<ul>
      <li><a href="javascript:void(0);">Afrique</a>

On apprend à tout age, mais j'aimerais bien comprendre pourquoi le # est à proscrire ou l'utilisation du javascript.
Désolé, mais c'est la première fois que je lis l'utilisation du void.

Merci à Jreaux62 si il veut bien me répondre.

**apdf1** · 01/11/2017, 11h18

Re,

Je te remercie et te souhaite une bonne journée

Max

**JefReb** · 01/11/2017, 11h59

Désolé, mais il n'y a que les imbéciles qui ne changent pas d'idées.
La solution que j'ai donné ne me plaisait pas, car il y avait des problèmes de positionnement et de séparations et un peu de simplifications.
Voici la dernière version que je propose avec un premier sous-niveau de 150px et un deuxième sous-niveau de 300px.

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

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav {
	margin-top:50px;
}
nav ul {
	list-style-type: none;
	margin:0;
	padding: 0;
 
}
nav li {
	position: relative;
 
}
nav > ul > li  {
	margin: 0 0 25px 0;
	height: 80px;
}
/* définition des liens */
nav a {
	width: 150px;
	line-height: 24px;
	font-size:12px;
	display: inline-block;
	text-align: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;	
}
/* Pour le premier niveau uniquement */
nav > ul > li > a {
	width: 80px;
	height:24px;	
	position: relative;
	left: -35px;
	top: 15px;
	background-color: #171515;
	color: red;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);		
}
/* positionnement des sous-niveaux */
nav li ul {
	position: absolute;
	left: 150px;
	top: -15px;
	z-index:999;
}
/* décalage du 2ème niveau */
nav > ul > li > ul {
	left: 18px;
}
/* décalage du 3ème niveau */
nav > ul > li > ul ul {
	top: -2px;;
}
nav > ul ul ul a {
	width:300px;					/* largeur du 3ème niveau */
}
/* espacement des sous-niveaux */
nav li ul {
	border-left: 2px solid transparent;
}
nav li ul li {
	border-top: 2px solid transparent;
}
/* Propriétés au survol de la souris */
nav > ul ul {
	display: none; 					/* on masque */
}
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; 		/* pas de changement pour le premier niveau */
	color: red;
}

Invité · 01/11/2017, 12h47

Bonjour,

1- pour les sous-niveaux, on n'est pas obligé de ré-écrire la largeur ou la position left en pixel :

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
nav li {
	width:150px; /*largeur des sous-menus*/
}
nav a {
	display: block;
}
nav li ul {
	position: absolute;
	width: 100%; /* même largeur que son parent */
	left: 100%; /* à droite de son parent */
	top: -15px;
	z-index:999;
}
nav > ul ul ul a {
	/*width:300px;*/	/* INUTILE,  si même largeur que son parent */
}

2- Quant aux espacements des sous-niveaux, pas besoin de border :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
nav li {
	position: relative;
	margin:2px; /* espacement des sous-niveaux */
}
/* espacement des sous-niveaux */
nav li ul {
	/*border-left: 2px solid transparent;*/	/* INUTILE */
}
nav li ul li {
	/*border-top: 2px solid transparent;*/	/* INUTILE */
}

3- couleur au :hover :
remplacer

Code css :

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

1
2
3
4
5
6
7
8
nav a:hover {
	background-color: red;
	color: #fff;
}
nav > ul > li > a:hover {
	background-color: #171515; 		/* pas de changement pour le premier niveau */
	color: red;
}

par

Code css :

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

1
2
3
4
nav > ul li:hover > a {
	background-color: green;
	color: white;
}

+ quelques ajustements ici et là...

**JefReb** · 01/11/2017, 17h13

Merci Jreaux62, toujours aussi concis et précis...
Mais je ne sais toujours pas pourquoi on ne peut pas mettre

Code css :

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

<li><a href="#">Afrique</a>

Invité · 01/11/2017, 17h33

A cause des médias TACTILES.

Dès qu'on pose le doigt, ça active le lien (# : ici, une ancre vide).

D'ailleurs, on évite de plus en plus d'utiliser :hover pour cette raison.
On préfère "au clic".

D'où mon menu : https://codepen.io/jreaux62/pen/dPxKKQ (qui fonctionne "au clic").

**JefReb** · 01/11/2017, 18h00

Arrg! les médias TACTILES! je les oublie toujours ceux la!
D'accord, il faut que j'y pense plus souvent.

Par contre sur les modifications du menu j'ai quand même quelques remarques.

D'accord pour le 1)

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
nav li {
	width:150px; /*largeur des sous-menus*/
}
nav a {
	display: block;
}
nav li ul {
	position: absolute;
	width: 100%; /* même largeur que son parent */
	left: 100%; /* à droite de son parent */
	top: -15px;
	z-index:999;
}
nav > ul ul ul a {
	/*width:300px;*/	/* INUTILE,  si même largeur que son parent */
}

Mais dans ce cas il ne faut pas oublier que le premier niveau est écrit verticalement.
Il faut donc, quand même, décaler le premier sous-niveau pour qu'il ne soit pas éloigné de 100% sur la droite:

Code css :

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

1
2
3
4
/* décalage du 2ème niveau  dû à la position vertical du texte*/
nav > ul > li > ul {     
	left: 18px;
}

Je suis d'accord aussi pour le 2)
Remplacer le border par un margin:2px; est plus simple

Mais je ne suis pas d'accord pour le 3)
Avec ce changement tous les liens sont changés y compris le premier niveau qui ne doit pas l'être.

Code css :

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

1
2
3
4
nav > ul li:hover > a {
	background-color: green;
	color: white;
}

Invité · 01/11/2017, 18h38

Envoyé par jreaux62

+ quelques ajustements ici et là...

Je te laisse le soin de faire les ajustements nécessaires

**JefReb** · 01/11/2017, 19h30

Yes sir. ... mais je ne suis pas l'auteur de cette question.
Mais je m'y intéresse ...

Ajouter un niveau au menu

CSS

Discussions similaires

Partager

Partager