Problème affichage sous sous menu déroulant

**taidasuke** · 26/12/2014, 23h21

Bonjour, j'essaie de faire un un menu avec plusieurs sous menus que j'ai réussie a faire sauf le css dont je m'y perds un petit peu.

Je tiens à préciser que je n'ai pas fait de copier coller pour ceux qui diront que je n'ai pas cherché. Pouvez vous m'aider, svp?

voici le code html & css

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
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="design.css">
 
<div id="menu">
<ul>
 <li><a href="quisommesnous.php">Qui sommes nous ?</a>
 </li>
 
 <li><a href="nosprestations.php">Nos Prestations</a></li>
<ul>
 <li><a href="gsm.php">Locations Motos</a>
 <ul>
	<li><a href="#">Honda</a>
		<ul>
			<li><a href="#">Deauville</a>
			<li><a href="#">VFR800</a>
			<li><a href="#">VFR1200</a>
			<li><a href="#">F6B</a>
			<li><a href="#">Pan-European</a>
			<li><a href="#">Goldwin</a>
		</ul>
	<li><a href="#">Kawazaki</a>
		<ul>
			<li><a href="#">Z1000</a>
			<li><a href="#">ZZR 1400</a>
			<li><a href="#">VN 1700 Voyager</a>
 
		</ul>
	<li><a href="#">Yamaha</a>
		<ul>
			<li><a href="#">FJR 1300</a>
			<li><a href="#">FZ1 Fazer</a>
			<li><a href="#">TDM 900</a>
 
		</ul>
		<li><a href="#">Vente accessoires et équipements</a>
		<ul>
			<li><a href="#">Accessoires moto</a>
			<li><a href="#">Equipement pilote</a>			
		</ul>
 
 </ul>
 </ul>
 
 <li><a href="sinscrire.php">S'inscrire à une formation</a></li>
 
</ul>
 
</div>

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
#menu ul {
margin: 0;     		/* pas de marge intérieur */
padding: 0;			/* Pas de marge extérieur */  
line-height:30px;
}
 
#menu li  {
list-style      :none;     /* on enlève les macros */
float           :left;     /* flottant gauche */
position        :relative;
background-color:#00ABFF;
}
 
#menu ul li a{
color:#F7FE2E;                 /*Couleur des liens */
text-decoration: none;      /*on enlève le soulignement */
width: 250px;               /* taille du truc */
height: 30px;
display: block;
text-align:center;
border: 0.95px solid #000000;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-o-transition: all 100ms linear;
-ms-transition: all 100ms linear;
transition: all 100ms linear;
font-family: arial;
font-size: 16px;
}
 
#menu ul ul {
position:absolute;
/*top:30.8px;     --> pas de marge en haut */     
visibility: hidden;
}
 
#menu ul li:hover ul {
visibility: visible;
 
}
 
#menu li:hover {
background-color:#FF8000;
color:#FF8000;
}
 
#menu ul li ul a {
width: 247.92px;
height:30px;
border: 1px solid #000000; 
}

**miss_socrates** · 27/12/2014, 11h04

Quel est le souci ?
Pour quelles propriétés css faut-il aider ?

**taidasuke** · 27/12/2014, 23h40

j'ai partiellement résolu le problème maintenant reste à savoir s'il y a des fautes dans le codes. le voici:

html

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
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="DesignGlobalMenu.css">
 
<ul id="menu">
	<li> <a href="#">Qui Sommes-Nous ?</a></li>
 
	<li>
 
		<a href="#">Nos Prestations</a>
		<a href="#">S'inscrire à une Formation</a>
		<ul>
			<li>
				<a href="#">Location Motos</a>
				<ul>
 
					<li>
						<a href="#">Honda</a>		
						<ul>
							<li>
								<a href="#">Deauville</a>
	<!--    				
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="deauville.jpg" width="200" height="110"></a>
</div>						
				-->
								<a href="#">VFR800</a>
								<a href="#">VFR1200</a>
								<a href="#">F6B</a>
								<a href="#">Pan-European</a>
								<a href="#">Goldwin</a>
							</li>						
						</ul>
							<li>
								<a href="#">Kawasaki</a>
							<ul>
								<li>
									<a href="#">Z1000</a>
	<!--    				
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="deauville.jpg" width="200" height="110"></a>
</div>						
				-->
								<a href="#">ZZR 1400</a>
								<a href="#">VN 1700 Voyager</a>
 
								</li>						
							</ul>
							<li>
								<a href="#">Yamaha</a>
							<ul>
								<li>
									<a href="#">FJR 1300</a>
 
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="deauville.jpg" width="200" height="110"></a>
</div>						
 
								<a href="#">FZ1 Fazer</a>
								<a href="#">TDM 900</a>	
					</li>						
				</ul>						
			</li>
		</li>					
	</ul>
 
</li>
<li>
	<a href="#">Vente accessoires et équipements</a>
	<ul>
		<li>
			<a href="#">Accessoires moto</a>
			<a href="#">Equipement pilote</a>
		</li>
	<ul>
</li>
</li>

Css

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
/* Main menu */
 
#menu
{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 200px;
	border-radius: 200px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}
 
#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}
 
#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
 
#menu li:hover > a
{
	color: #fafafa;
}
 
*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}
 
#menu li:hover > ul
{
	display: block;
}
 
/* Sub-menu */
 
#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
#menu ul ul
{
  top: 0;
  left: 200px;
}
 
#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
 
#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}
 
#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 200px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}
 
*html #menu ul a /* IE6 */
{    
	height: 10px;
}
 
*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}
 
#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}
 
#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
 
#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
 
#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}
 
#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}
 
 
#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
div.img {
    margin: 1px;
    padding: 1px;
    height: auto;
    width: auto;
    float: center;
}
 
 
 
 
 
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

**miss_socrates** · 28/12/2014, 09h17

Envoyé par taidasuke

reste à savoir s'il y a des fautes dans le codes. le voici:
<ul>
</li>
</li>

[/CODE]

Il y a quelques remarques:
1) Le code html ne peut pas commencer par une balise <ul>. Il faut insérer le code dans <body> j'ignore s'il se trouve dans la page
2) Il faut examiner si la hiérarchie des items de liste correspond à la structure: menu > sous-menu > sous sous-menu
3) Il y a des balises <ul> et <li> qui ne sont pas fermées (voir notamment les dernières lignes 70 à 77. On ne peut pas non plus terminer le code par une balise </li>

Pour le CSS, modifier les #menu ul et les #menu li en #menu ul li{}

**taidasuke** · 29/12/2014, 01h31

le html

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
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
139
140
141
142
<html>
<head>
	<title>Accueil Motodream.net</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="DesignGlobal.css">
	<script type="text/javascript" src="../javascript/fonction-cligno.js"></script>
</head>
<body>
<div class="Header">
    Bienvenue sur Motodream.net</br>
	<div class="banner"><div id="zoneclignotante2" style="visibility:visible;">Locations, ventes et formations sur moto</div></div>
</div>
<div class="Volet_gauche" >
	Ce volet est vide.
</div>
 
<ul id="menu">
	<li><a href="qui_sommes_nous.php">Qui Sommes-Nous ?</a></li> <!-- Menu qui présente la société -->
 
	<li>
 
		<a href="">Nos Prestations</a> <!-- Menu Prestation   -->
		<ul>
			<li>
				<a href="">Location Motos</a> <!-- Sous menu Location Motos contenant les différentes marques de motos louables   -->
				<ul>
 
					<li>
						<a href="">Honda</a>	<!--  Sous menu  contenant les motos de la marque Honda  -->  
						<ul>
							<li>
								<a href="locationmoto.php?Moto=Honda&Modele=Deauville">Deauville</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=Deauville"><img src="deauville.jpg" width="200" height="110"></a>
								</div>						
								<a href="locationmoto.php?Moto=Honda&Modele=VFR800">VFR800</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=VFR800"><img src="deauville.jpg" width="200" height="110"></a>
								</div>	
								<a href="locationmoto.php?Moto=Honda&Modele=VFR1200">VFR1200</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=VFR1200"><img src="deauville.jpg" width="200" height="110"></a>
								</div>
								<a href="locationmoto.php?Moto=Honda&Modele=F6B">F6B</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=F6B"><img src="deauville.jpg" width="200" height="110"></a>
								</div>
								<a href="locationmoto.php?Moto=Honda&Modele=Pan-European">Pan-European</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=Pan-European"><img src="deauville.jpg" width="200" height="110"></a>
								</div>
								<a href="locationmoto.php?Moto=Honda&Modele=Goldwin">Goldwin</a>
								<div class="img"> <!-- image de la moto à aficher -->
									<a target="_blank" href="locationmoto.php?Moto=Honda&Modele=Goldwin"><img src="deauville.jpg" width="200" height="110"></a>
								</div>
							</li>
						</ul>
							<li>
								<a href="">Kawasaki</a> <!--  Sous menu  contenant les motos de la marque Kawasaki -->
								<ul>
									<li>
										<a href="locationmoto.php?Moto=Yamaha&Modele=FJR 1300">FJR 1300</a>
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=FJR 1300"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										<a href="locationmoto.php?Moto=Yamaha&Modele=FZ1 Fazer">FZ1 Fazer</a>
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=FZ1 Fazer"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										<a href="locationmoto.php?Moto=Yamaha&Modele=TDM 900">TDM 900</a>	
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=TDM 900"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										</li>
									</li>
								</ul>
								<li>
									<a href="">Yamaha</a> <!--  Sous menu  contenant les motos de la marque Yamaha -->
									<ul>
										<li>
										<a href="locationmoto.php?Moto=Yamaha&Modele=FJR 1300">FJR 1300</a>
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=FJR 1300"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										<a href="locationmoto.php?Moto=Yamaha&Modele=FZ1 Fazer">FZ1 Fazer</a>
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=FZ1 Fazer"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										<a href="locationmoto.php?Moto=Yamaha&Modele=TDM 900">TDM 900</a>	
										<div class="img"> <!-- image de la moto à aficher -->
											<a target="_blank" href="locationmoto.php?Moto=Yamaha&Modele=TDM 900"><img src="deauville.jpg" width="200" height="110"></a>
										</div>
										</li>
									</ul>
								</li>
							</li>					
						</ul>
					</li>
			</li> <!-- là -->
		<li>
			<a href="">Vente accessoires et équipements</a> <!-- Sous menu Vente accessoires et équipements   -->
			<ul>
			<li>
				<a href="accessoires_moto.php">Accessoires moto</a>
				<a href="equipement_pilote.php">Equipement pilote</a>
			</li>
			</ul>
		</li>
	</ul>
	</li>
	<li>
		<a href="insc_form.php">S'inscrire à une Formation</a> <!-- Menu Pour s'inscrire à une formation   -->
	</li>
</ul>
 
 
 
 
 
 
 
 
 
 
</br></br></br></br></br>
<u>liste des liens:</u></br>
<a href="qui_sommes_nous.php">Qui sommes nous</a></br>
<a href="prestations.php">Nos prestations</a></br>
<a href="insc_form.php">S'inscrire à une formation</a></br>(formations à la mécanique ainsi qu'au pilotage)</br>
------------------------------- </br><!-- <<--tirets inutiles -->
 
<a href="locationmoto.php?modele=vnvoyager">Location de motos</a></br>
vente d'équipement</br>
location de motos (> 125 cm3)</br>
vente de motos</br>
dépot vente de motos</br>
 
<li><a href='locationmoto.php?Moto=Kawasaki&Modele=test'>Kawasaki test</a></li>
 
</body>
</html>

le css modifié

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
body
{
   margin: 0px;
   margin-top: 0px;
   width: 100%;
   height: 100%;
   background-color: #FFFFFF;
}
 
.Header
{
   width: 100%;
   height: 15.5%;
   background-color: #2E8B57;
   text-align: Center;
   font-size: 24px;
   font-family: Digital Desolation;
   color : #FFFFFF;
   font-weight: bold;
}
 
.banner
{
	font-size: 18px;
	text-decoration: underline;
}
 
.boitegenerale
{
   width: 100%;
   height: 100%;
}
 
a:link 
{ 
 text-decoration:none; 
}
 
.Volet_gauche
{
 width: 15%;
 height: 84.6%;  
 background-color:#99ff33;
 float: left;
 text-align: Center;
 font-size: 20px;
 font-family: Arial; 
}
.Volet_Centre
{
	width: 100%;
	height: 100%;
	background-color:#6666ff;
	text-align: center;
	font-size: 16px;
	font-family: Arial;
}
 
 
#menu
{
	width: 85%; /* dimension horizontale */
	height: 36px; /* dimension verticale */
	margin: 0;
	margin-left: 15%; /* marge à gauche */
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111; /* couleur du menu */
	background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
 
 
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}
 
#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}
 
#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
 
}
 
#menu li:hover > a
{
	color: #fafafa;
}
 
*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}
 
#menu li:hover > ul
{
	display: block;
}
 
/* Sub-menu */
 
#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
 
}
 
#menu ul ul
{
  top: 0;
  left: 200px;
}
 
#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
	background: #111;
}
 
#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none; 
	background-color: #000000;	
 
}
 
#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 200px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
	background-color: #000000;	
}
 
*html #menu ul a /* IE6 */
{    
	height: 10px;
}
 
*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}
 
#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}
 
#menu ul li:first-child > a
{
 
	background-color: #000000;
}
 
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
 
}
 
#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
 
#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}
 
#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}
 
 
/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
div.img {
    margin: 1px;
    padding: 1px;
    height: auto;
    width: auto;
    float: center;
}

par contre je vois que les sous sous menu passe au dessus de location motos, vente équipement et acessoires comment je fais pour le mettre a la fin du sous menu dans le css?

Nom : menu modifié.jpg
Affichages : 172
Taille : 235,6 Ko

**miss_socrates** · 29/12/2014, 05h07

Tout dépend de l'ordre de placement des items <li>
Les éléments du sous-menu doivent se trouver à côté de leur item de menu. Sur la photo, cela me semble correct, Honda, Kawasaki sont bien des sous-sous-menus du sous-menu Location Motos et sont bien positionnés à côté . Il ne faut pas les placer à la fin ni en dessous, cela n'aurait pas de sens

Problème affichage sous sous menu déroulant

Conception Web

Discussions similaires

Partager

Partager