Menu déroulant identique

**laurent84200** · 12/01/2018, 16h54

Bonjour,

J'ai un pb avec ce code que j'ai trouvé et modifié mais sans doute trop modifié !!!

Mon image en deuxième niveau se répète au 3ème et 4ème. J'ai beau cherché dans un cours, je ne trouve pas.

Pouvez-vous m'aider svp ?

Voici mon

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<ul id="menu">
	<li><a href="#">&nbsp </a></li>
	<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="p2.html">&nbsp </a></li>
		 	<li><a href="p3.html">&nbsp </a></li>
			<li><a href="p4.html">&nbsp </a></li>
		</ul>
	</li>
</ul>

Et voici le

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
/* background*/
#menu li:first-child{
background:url(../images/b1_nv2.jpg);
margin-top:-3px;
}
#menu li:nth-child(2){
background:url(../images/b2_nv2.jpg);
}
 
 /*background survol */
#menu li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b1a_nv2.jpg);
}
#menu li:nth-child(2):hover{
background:url(../images/b2a_nv2.jpg);
}
#menu li:nth-child(2) li{
background:url(../images/b21_nv2.jpg);
}
#menu li:nth-child(2) li:hover{
background:url(../images/b21a_nv2.jpg); 
}
#menu li:nth-child(2) li{
background:url(../images/b22_nv2.jpg);
}
#menu li:nth-child(2) li:hover{
background:url(../images/b22a_nv2.jpg); 
}
#menu li:nth-child(2) li{
background:url(../images/b23_nv2.jpg);
}
#menu li:nth-child(2) li:hover{
background:url(../images/b23a_nv2.jpg); 
}

Encore merci pour votre aide

Invité · 12/01/2018, 17h50

Bonjour,

pour ne cibler qu'un niveau à la fois (et pas les suivants) :

Code css :

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

1
2
3
#menu > li { ... } /* niveau 1 */
 
#menu > li > ul > li { ... } /* niveau 2 */

**JefReb** · 12/01/2018, 19h30

Sur la réponse de Jérome, et pour être positif et apporter quelque chose, j'ai remplacé le background par des couleurs à la place d'images fantômes et tenté d'apporter une solution au problème de laurent84200
Si ça peut l'aider:

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
* {
	margin: 0;								/* Mettons TOUTES les marges extérieures à zéro 				*/
	padding: 0;								/* Mettons TOUS les espaces intérieures à zéro  				*/
	box-sizing: border-box;					        /* largeur des boites= width+padding+border     				*/
}
html, body {
	height: 100%;							/* Toute la hauteur de l'écran		*/							
	font-size: 100%;						        /* 100%=16px=1rem	  */											
}
body {
	font-family: "Times New Roman", Times, serif;  Définition des polices de base							
	font-size: 100%;						         /* 100%=16px=1em	*/											
}
#menu {
	width: 10%;							  /* Définissons une largeur pour mobile first					*/
	margin: 0 auto;							  /* centrons ce menu								        */
}
#menu ul, #menu li {
	list-style-type: none;					/* supprimons TOUTES les puces								*/
}
/* définition du premier niveau					 */
#menu > li {
	background-color: blue;				/* tous les li du premier niveau */
}
#menu > li:nth-child(2) {
	background-color: yellow;			/* seulement le deuxième li du premlier niveau */
}
/* définition des li du premier niveau au survol*/
#menu > li:hover {
	background-color: maroon;
}
/* définition des li du deuxième niveau */
#menu > li li {
	background-color: green;  			/* de TOUS les li du deuxième niveau */
	padding-left:50px;
}
#menu > li li:nth-child(2) {
	background-color: black;  			/* du deuxième li du deuxième niveau */
}
#menu > li li:nth-child(3) {
	background-color: red;  				/* dtroisème li du deuxième niveau */
}
#menu > li li:nth-child(4) {
	background-color: magenta;  				/* du quatrième li du deuxième niveau */
}
/* définition des li du deuxième niveau au survol*/
#menu > li:nth-child(2) li:hover {
	background-color: orange;                          /* pour simplifier tous les LI en orange */
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
<ul id="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a>
    <ul>
      <li><a href="#">2.1</a></li>
      <li><a href="#">2.2</a></li>
      <li><a href="#">2.3</a></li>
    </ul>
  </li>
</ul>

Mais c'est une approche partielle et très rapide, à adapter.

**laurent84200** · 15/01/2018, 08h56

#JefReb
Je vous remercie pour votre aide précieuse. Je vais essayer de mettre en application votre démo et je vous tiens informé.

**laurent84200** · 06/02/2018, 10h49

Bonjour,

Grace à vos explications j'ai avancé mais là je bute sur les sous menus de mon deuxième "li" pour lesquels je n'arrive pas a afficher l'image désirée.
Cela me donne mes images de mon troisième "li", et si je ne paramètre pas le css de mon 3ème "li", le second fonctionne mais le 3ème est identique !!! J'espère que je suis assez clair

Comment faire ?

Voici mon code html, que j'ai développé par rapport à mon post précédent :

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
<ul id="menu2">
	<li><a href="#">&nbsp </a></li>
	<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="p2.html">&nbsp </a></li>
		 	<li><a href="p3.html">&nbsp </a></li>
			<li><a href="p4.html">&nbsp </a></li>
		</ul>
	</li>
<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="p5.html">&nbsp </a></li>
			<li><a href="p6.html">&nbsp </a></li>
		</ul>
  </li>
</ul>

Et voici le nouveau code css (que j'ai simplifié en mettant uniquement la partie traitant des menus déroulants :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* background menu 1er niveau*/
#menu2 li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b2_nv.jpg);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b3_nv.jpg);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b4_nv.jpg);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5_nv.jpg);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b6_nv.jpg);
}
 
 /*background menu 1er niveau au survol */
#menu2 li:first-child:hover {
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 li:nth-child(2):hover{
background:url(../images/visiteurs/b2a_nv.jpg);
}
#menu2 li:nth-child(3):hover{
background:url(../images/visiteurs/b3a_nv.jpg);
}
#menu2 li:nth-child(4):hover{
background:url(../images/visiteurs/b4a_nv.jpg);
}
#menu2 li:nth-child(5):hover{
background:url(../images/visiteurs/b5a_nv.jpg);
}
#menu2 li:last-child:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}
 
 
/*background menu 2ème niveau - PRESENTATION*/
#menu2 li ul li:nth-child(1){
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 li ul li:nth-child(2){
background:url(../images/visiteurs/b22_nv.jpg);
}
#menu2 li ul li:nth-child(3){
background:url(../images/visiteurs/b23_nv.jpg);
}
 
 
 /*background menu 2ème niveau au survol - PRESENTATION*/
 
#menu2 li ul li:nth-child(1):hover{
background:url(../images/visiteurs/b21a_nv.jpg);
}
#menu2 li ul li:nth-child(2):hover{
background:url(../images/visiteurs/b22a_nv.jpg);
}
#menu2 li ul li:nth-child(3):hover{
background:url(../images/visiteurs/b23a_nv.jpg);
}
 
 
 
/*background menu 2ème niveau - SERVICES*/
#menu2 li ul li:nth-child(1){
background:url(../images/visiteurs/b31_nv.jpg);
}
#menu2 li ul li:nth-child(2){
background:url(../images/visiteurs/b32_nv.jpg);
}
 
 /*background menu 2ème niveau au survol - SERVICES*/
 
#menu2 li ul li:nth-child(1):hover{
background:url(../images/visiteurs/b31a_nv.jpg);
}
#menu2 li ul li:nth-child(2):hover{
background:url(../images/visiteurs/b32a_nv.jpg);
}

Merci pour votre aide.

**JefReb** · 06/02/2018, 11h48

Laurent, n'aurais-tu pas lu les explications de Jreaux62
Si tu veux cibler précisément il faut utiliser > pour sélectionner les enfants directs d'un parent.

De plus il ne faut pas oublier les ;
ainsi &nbsp s'écrit  

**laurent84200** · 06/02/2018, 12h40

Merci pour ta réponse #JebReb

Je viens de faire les modifs, aussi bien en html que css, mais rien ne fonctionne.

Je t'avoues être un peu perdu mais je débute en css.

Voici le codes css, aurais-je omis quelque chose ?

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* background menu 1er niveau*/
#menu2 > li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
}
#menu2 > li:nth-child(2){
background:url(../images/visiteurs/b2_nv.jpg);
}
#menu2 > li:nth-child(3){
background:url(../images/visiteurs/b3_nv.jpg);
}
#menu2 > li:nth-child(4){
background:url(../images/visiteurs/b4_nv.jpg);
}
#menu2 > li:nth-child(5){
background:url(../images/visiteurs/b5_nv.jpg);
}
#menu2 > li:last-child{
background:url(../images/visiteurs/b6_nv.jpg);
}
 
 /*background menu 1er niveau au survol */
#menu2 > li:first-child:hover {
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 > li:nth-child(2):hover{
background:url(../images/visiteurs/b2a_nv.jpg);
}
#menu2 > li:nth-child(3):hover{
background:url(../images/visiteurs/b3a_nv.jpg);
}
#menu2 > li:nth-child(4):hover{
background:url(../images/visiteurs/b4a_nv.jpg);
}
#menu2 > li:nth-child(5):hover{
background:url(../images/visiteurs/b5a_nv.jpg);
}
#menu2 > li:last-child:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}
 
 
 /*background menu 2ème niveau - PRESENTATION*/
#menu2 > li > ul > li:nth-child(1){
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 > li > ul > li:nth-child(2){
background:url(../images/visiteurs/b22_nv.jpg);
}
#menu2 > li > ul > li:nth-child(3){
background:url(../images/visiteurs/b23_nv.jpg);
}
 
 
 /*background menu 2ème niveau au survol - PRESENTATION*/
 
#menu2 > li > ul > li:nth-child(1):hover{
background:url(../images/visiteurs/b21a_nv.jpg);
}
#menu2 > li > ul > li:nth-child(2):hover{
background:url(../images/visiteurs/b22a_nv.jpg);
}
#menu2 > li > ul > li:nth-child(3):hover{
background:url(../images/visiteurs/b23a_nv.jpg);
}
 
 
 
/*background menu 2ème niveau - SERVICES*/
#menu2 > li > ul > li:nth-child(1){
background:url(../images/visiteurs/b31_nv.jpg);
}
#menu2 > li > ul > li:nth-child(2){
background:url(../images/visiteurs/b32_nv.jpg);
}
 
 /*background menu 2ème niveau au survol - SERVICES*/
 
#menu2 > li > ul > li:nth-child(1):hover{
background:url(../images/visiteurs/b31a_nv.jpg);
}
#menu2 > li > ul > li:nth-child(2):hover{
background:url(../images/visiteurs/b32a_nv.jpg);
}

**JefReb** · 07/02/2018, 09h40

Pourtant Jreaux62 dans son post #2 te l'avait bien expliquer.
Je te remets l'exemple. Mais en rajoutant la balise <nav>, car c'est apparemment un menu.
voir codepen https://codepen.io/JefReb/pen/YeGbYN

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
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
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
* {
        margin: 0;                                                              /* Mettons TOUTES les marges extérieures à zéro                              */
        padding: 0;                                                             /* Mettons TOUS les espaces intérieures à zéro                               */
        box-sizing: border-box;                                         /* largeur des boites= width+padding+border                                     */
}
html, body {
        height: 100%;                                                   /* Toute la hauteur de l'écran         */
        font-size: 100%;                                                        /* 100%=16px=1rem         */
}
body {
        font-family: "Times New Roman", Times, serif;
Définition des polices de base  font-size: 100%;                                                        /* 100%=16px=1em       */
}
nav#menu {
        width: 80%;                                                       /* Définissons une largeur pour mobile first                                 */
        margin: 0 auto;                                                   /* centrons ce menu                                                                   */
}
#menu ul, #menu li {
        list-style-type: none;                                  /* supprimons TOUTES les puces                                                          */
}
#menu a {
        color: black;
        font-size: 150%;
}
/* définition du premier niveau                                         */
#menu > ul > li > a {
        background-color: blue;                         /* tous les li du premier niveau */
}
#menu > ul > li:nth-child(2) > a {
        background-color: yellow;                       /* seulement le deuxième li du premlier niveau */
}
/* définition des li du deuxième niveau */
#menu > ul > li > ul > li  a {
        background-color: green;                        /* de TOUS les li du deuxième niveau */
        padding-left: 50px;
}
#menu > ul > li > ul > li:nth-child(2)  a {
        background-color: black;                        /* du deuxième li du deuxième niveau */
}
#menu > ul > li > ul > li:nth-child(3) a {
        background-color: red;                                  /* dtroisème li du deuxième niveau */
}
#menu > ul > li > ul > li:nth-child(4) a {
        background-color: magenta;                              /* du quatrième li du deuxième niveau */
}
 
/* définition des li du troisième niveau */
#menu > ul > li > ul > li > ul li:first-child a {
        background-color: darkblue;                     /* du premier li du troisième niveau */
        padding-left: 100px;
}
#menu > ul > li > ul > li > ul > li:nth-child(2) a {
        background-color: purple;                       /* du deuxième li du troisième niveau */
}
#menu > ul > li > ul > li > ul > li:nth-child(3) a {
        background-color: springgreen;                                  /* dtroisème li du troisième niveau */
}
#menu > ul > li > ul > li > ul > li:nth-child(4) a {
        background-color: darkred;                              /* du quatrième li du troisième niveau */
}
 
</style>
</head>
 
<body>
<nav  id="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a>
      <ul>
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a>
          <ul>
            <li><a href="#">2.3.1</a></li>
            <li><a href="#">2.3.2</a></li>
            <li><a href="#">2.3.3</a></li>
            <li><a href="#">2.3.4</a></li>
          </ul>
        </li>
        <li><a href="#">2.4</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>

**laurent84200** · 07/02/2018, 15h02

Merci JefReb encore une fois.
Je teste cela demain au bureau

**laurent84200** · 07/02/2018, 18h33

Je n'ai pas pu attendre, j'ai fait des tests de chez moi.
Ce n'est pas ce que je voulais mais à partir de ta démo je suis arrivé à bon port !!

Je pense que je me suis mal exprimé mais je voulais atteindre les sous menus du 3ème menu et c'est là que je n'ai pas été clair.

Voici le code que j'ai créer pour atteindre ce fichu 3ème menu.

On peut peut-être le simplifier mais le raisonnement me parait correct. Qu'en penses-tu @JefReb ?

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
/*background sous menu 3ème - SERVICES*/
#menu2 > li:nth-child(3) > ul > li:nth-child(1){
background:url(../images/visiteurs/b31_nv2.jpg);
}
#menu2 > li:nth-child(3) > ul > li:nth-child(2){
background:url(../images/visiteurs/b32_nv2.jpg);
}
 
/* background sous menu 3ème au survol - SERVICES*/
 
#menu2 > li:nth-child(3) > ul > li:nth-child(1):hover{
background:url(../images/visiteurs/b31a_nv2.jpg);
}
#menu2 > li:nth-child(3) > ul > li:nth-child(2):hover{
background:url(../images/visiteurs/b32a_nv2.jpg);
}

Encore merci pour ton aide.

**JefReb** · 08/02/2018, 12h24

A première vue ça me paraît correcte, mais je continue à dire que si c'est un menu il faut l'encapsuler dans une balse <nav>
si bien que tu devrais avoir <nav id="menu2">
et les déclarations

Code css :

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

nav#menu2 > ul > li:nth-child(3) > ul > li:nth-child(1){ ... }

mais là je pinaille ...

et pour pinailler envore, nth-child(1)= first-child
ça n'a pas d'importance, mais on voit tout de suite quoi on vise

mais là je pinaille je pinaille et certains experts ne seront pas de mon avis ....

**NoSmoking** · 08/02/2018, 15h02

Bonjour,

et pour pinailler envore, nth-child(1)= first-child

ce n'est pas du pinaillage, c'est la vérité.

ça n'a pas d'importance, mais on voit tout de suite quoi on vise

mais là je pinaille je pinaille ....

c'est un point de vu qui se défend même si visuellement une suite nth-child(1), nth-child(2) ... peut être plus cohérente à la lecture.

Exemple

Code :

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

1
2
3
4
/* définition délai des images */
.diaporama img:nth-child(1) { animation-delay: 0s;}
.diaporama img:nth-child(2) { animation-delay: 2s;}
.diaporama img:nth-child(3) { animation-delay: 4s;}

contre

Code :

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

1
2
3
4
/* définition délai des images */
.diaporama img:first-child  { animation-delay: 0s;}
.diaporama img:nth-child(2) { animation-delay: 2s;}
.diaporama img:nth-child(3) { animation-delay: 4s;}

c'est un choix difficile à faire !

Menu déroulant identique

CSS

Discussions similaires

Partager

Partager