Bonjour la Communauté,

Je reprends un dossier sur les sous-menus que j'avais fait il y a deux ou trois ans.

A l'époque, j'étais parti sur les images vierges pour afficher mes sous-menus. Aujourd'hui je voudrais mettre une image de bouton non vierge et je me rends compte que mon code n'est pas bon.

Voici le code html qui me semble bon :

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
<ul id="menu2">
	<li><a href="#">&nbsp </a>	</li>
<li><a href="#">&nbsp </a> <!-- METTRE ESPACE --> 
		<ul>
			<li><a href="page2.html">&nbsp </a></li> <!--Qui sommes nous ?--> 
		 	<li><a href="page3.html">&nbsp </a></li> <!--iD RECHANGE membre <font color="#f39300">N!</font>--> 
			<li><a href="page4.html">&nbsp </a></li> <!-- Notre réseau -->
		</ul>
	</li>
<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="page5.html">&nbsp </a></li><!--Nos plateformes--> 
			<li><a href="page6.html">&nbsp </a></li><!--Nos partenaires--> 
		</ul>
	</li>
  <li><a href="page7.html">&nbsp </a>	</li>
 
  <li><a href="page8.html">&nbsp;</a>    </li>
 
  <li><a href="page9.html">&nbsp </a>	</li>
 
</ul>

Et voici le code css :

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
/* Principal */
#menu2, #menu2 ul{
padding:0;
margin-top:3px;
list-style:none;
text-align:center;
font-weight:bold;
}
 
#menu2 li{
display:inline-block;
position:relative;
width:143px;
height:39px;
line-height:39px;
}
 
#menu2 ul li{
display:inherit;
}
 
#menu2 ul{
position:absolute;
max-height:0px;
overflow:hidden;
transition: 1.6s;
}
 
#menu2 li:hover ul{
max-height:156px;
}
 
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
margin-top:-3px;
}
#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 des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 li:nth-child(2) li{
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b21a_nv.jpg); 
}
#menu2 li:nth-child(3) li{
background:url(../images/visiteurs/b31_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b31a_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#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, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}
En fait, dans mon sous-menu 2.1, 2.2 et 2.3, il s'affiche la même image (b21_nv.jpg) et b21a_nv.jpg (au survol) car je ne sais pas quoi mettre comme code pour le 2.2 et 2.3.

J'espère que vous m'avez compris, car je sais pas trop si c'est bien clair.

Merci pour votre aide