Menu à 3 niveaux

**greg38220** · 03/10/2014, 12h23

Bonjour a tous, j'ai un petit souci avec ma page de menu je n'aarive pas affiche un troisieme niveau sur une liste.
un coup de main serait la bienvenues.
Dans le menu photos j'aimerais faire apparaitre sous 2013/2014 des autre liens "soiree concert" ici pour demo
voici mon code menu.php

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><!-- top nav -->
	<div class="menu">
		<ul><!--ligne des menus-->
			<li><a href="index.php">Acceuil</a></li>
			<li><a>Agenda</a>
				<ul><!--ligne des sous menus-->
					<li><a href="Ventes.php">Vente</a></li>
					<li><a href="Manifestations.php">Manifestations</a></li>
					<li><a href="soirees.php">Soirée</a></li>
				</ul>
			</li>
			<li><a>Manifestaions en photos</a>
				<ul><!--ligne du menu-->
					<li><a>Année 2013_2014</a>
						<ul><!--ligne des sous sous menus-->
							<li><a href="soiree_concert.php">Soirée concert</a></li>
						</ul>
					</li>
					<li><a href="annee2014_2015.php">Année 2014_2015</a></li>
				</ul>
			</li>
			<li><a href="mailto:sou.de.saint.pierre@gmail.com"title="sou des ecoles">Nous contactez</a></li>
		 </ul>
	</div>
</nav><!-- end of top nav -->

et mon fichier 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
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
/* reset */
* {
margin: 0;
padding: 0;
}
 
/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}
 
/* page générale du site */
body {
margin: 0 auto;
width: 1040px;/*Largeur de la page web*/
font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
background: #f5e643;/*#ccad98, couleur de fond de la page web*/
}
 
 
 standard alignments 
/*.alignleft {
float: left;
}*/
 
img.alignleft {
margin: 5px 10px 0 0; 
}
 
.alignright {
float: right;
}
 
img.alignright {
margin: 5px 0 0 10px; 
}
 
.center {
text-align: center;
}
.separation{
border-bottom: #213458 1px solid;/*trait de séparation article page BUREAU*/
clear: both;
text-align: center;
font-size: 28px;
color: #213458;
}
/* Hx tags */
 
h1 {
font-size: 30px;
font-family: Garamond, Georgia, Times, "Times New Roman", serif;
padding: 20px 0;
color: #C03000;
}
 
 
h3 {
font-size: 18px;
color: #213458;
padding-bottom: 3px;
border-bottom: #213458 1px solid;
margin-bottom: 10px;
}
 
/*marge entre le texte et la bordure du cadre paragraphe*/
p {
padding-bottom: 10px;
}
 
/* cadre du titre du site */
header {
margin-top: 10px;/* marge entre l'en tête et le haut de la page*/
background: #000000 url("images/logo1.png");/*image de fond en tête si pas d'image*/
height: 200px; /* pou IE */
min-height: 200px; /* pas pour IE */
/* Ombrage et contour du cadre*/
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
 
/* titre générale du site*/
header h1 {
position: relative;
z-index: 9999;/*pour dire que le calque titre doit etre superpose au autre calque*/
width: 1040px;/*Largeur sur laquel le text doit etre centrer*/
padding-top: 180px;/*espace entre le titre et le haut du cadre de titre 30*/
text-align: center;/*centrage du titre*/
color: #05B011;/*couleur du titre du site #213458*/
}
 
 
/* nav */
 
nav {
background: #76f665;/*couleur de fond du cadre des menus #213458*/ 
margin: 0 auto;
width: 1040px;/*Largeur de la barre de menu*/
display: block;
float: left;/*positionnement a gauche*/
/*ombrage de la barre de menu*/
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
 
nav .menu {
font-size: 16px;/*grandeur de l'ecriture des menu "Acceuil,Agenda,Photos,nous contacter*/
font-weight: bold;/*La propriété de feuille de style css font-weight peut prendre la valeur de :
					- lighter, le texte est affiché en léger.
					- normal, le texte est affiché en normal.
					- bold, le texte est affiché en gras.
					- bolder, le texte est affiché en très gras.
					- 100 (lighter), 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 (bolder).*/
margin-left: 12px;/*decalage du text par rapporta la gauche*/
}
 
nav .menu ul {
list-style: none;
margin: 0;
}
 
nav .menu li {
float: left;
position: relative;
}
 
nav .menu a {
display: block;
text-decoration: none; 
color: #yellow;  /*couleur de ? F0E7D4*/
padding: 0 40px;/*espacement des titres des menus haut*/
line-height: 35px;/*Hauteur de la barre des menus*/
}
 
nav .menu a:hover {
color: #76f665; /*changement de couleur lors du passage de la souris sur menus haut*/
}
 
/* nav 1-niveau */
nav .menu li ul { 
display: none; 
}
 
nav .menu ul li a {
display: block;
text-decoration: none;
color: #013AF6;/* couleur de l'ecriture du menu du haut #F0E7D4  */
background: #76f665/*#76f665*/;/* couleurs de fond ecriture des menus #213458 */
/*margin-left: 1px;*/
/*white-space: nowrap;*/
}
 
nav .menu ul li a:hover { 
background: #a0acc3; /*changement de couleur sur le passage des titre avec la souris*/
}
 
nav .menu li:hover ul {
display: block;
position: absolute;
}
 
nav .menu li:hover li {
float: none;
}
 
nav .menu li:hover a { 
background: #a0acc3; /*changement de couleur sur le passage des titre avec la souris*/
}
 
 
nav .menu li:hover li a:hover { /*changement de couleur sur le passage des titre avec la souris*/
background: #a0acc3; 
}
 
/*Colonne des articles*/
#content {
float: left; 
width: 680px;/*Largeur de la colonne principales #610*/
height: auto;/*Hauteur automatique des pages principales #200*/
margin: 0 0 10px 0; 
padding: 30px 20px 5px 20px;
background-color: #fda1fc;/*couleur de fond des pages principales #F0E7D4;*/
/*cadre de la colonne*/
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
/*photos du bureau*/
div#avatar1 {
  background-image: url(images/GREG.png);
  background-repeat: no-repeat;
  width: 100px;
  height: 103px;
  padding: 0;
}
/* article */
article {
float: center;/*left*/
width: 660px;/*620*/
height: auto;/*200*/
margin-bottom: 30px;
}
 
aside section ul {
margin: 0 0 0 20px;
list-style-image: url(images/arrow.gif);/* image des liste informations et classes*/
color: #ffffff;/*#213458 couleur du fond de la liste si arrow.gif est absent*/
}
 
/*cadre insertion photos*/
article .thumb {
float: left;
width: 200px;
height: 200px;
/* Ombrages du cadre */
-moz-border-radius: 80px;/*arrondissement les coins du cadre*/
-webkit-border-radius: 10px;/*arrondissement des angles du cadre*/
}
/*paragraphe des titres dans les articles*/
article .title {
text-align: center;
font-size: 22px;
color: #213458;
}
/*paragraphes dans les articles*/
article .story {
float: right;
width: 420px;
}
 
article .textalign{
clear: both;
text-align: left;
}
 
article .text{
text-align: center;
font-size: 20px;
color: #2400ff;
}
article li{
margin: 0 0 0 30px;
position: relative;
font-family: Arial, sans-serif;
color: #3f8dee;
 
display : list-item;
font-size: 15px;
list-style-image: url(images/arrow.gif);/* image des liste informations et classes*/
 
}
article .tarifs {
clear: both;
text-align: center;
font-size: 15px;
color: #2400ff;
}
 
article .manif {
clear: both;
text-align: center;
font-size: 14px;
color: #000000;
/*border-bottom: #213458 1px solid;*/
}
article .bureau {
clear: both;
text-align: center;
font-size: 14px;
color: #000000;
}
 
table{
margin-left:auto;
margin-right:auto;
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
text-align : center;
width: 250px;
height: 30px;
border: 1px solid black;
}
/*colonne des menus de droite*/
aside {
float: right;
text-align: left; 
width: 300px; /*Largeur du cadres des menis de droite*/
margin:0; 
padding:0;
}
/*boite d'informations heure actuel*/
aside section span{
text-align: center;
font-family: Garamond, Georgia, Times, "Times New Roman", serif;
font-size: 18px;
color: #013AF6;
}
/*boite d'informations compte a rebours*/
aside section div{
text-align: center;
font-family: Garamond, Georgia, Times, "Times New Roman", serif;
font-size: 18px;
color: #013AF6;
}
 
aside section {
margin: 0 0 10px 0;
padding: 30px 15px;
background-color: #fda1fc;/*couleur de font des block menus de droite #F0E7D4;*/
-webkit-box-shadow: 3px 3px 7px #777;/*ombrage*/
-moz-box-shadow: 3px 3px 7px #777;
}
 
aside section ul {
margin: 0 0 0 20px;
list-style-image: url(images/arrow.gif);/* image des liste informations et classes*/
color: #ffffff;/*#213458 couleur du fond de la liste si arrow.gif est absent*/
}
 
aside section ul li a {
display: block;
text-decoration: none;
color: #fe0303;/*couleur de l'ecriture des menus selectionnable a droite #000000;*/
}
 
aside section ul li a:hover {
background-color: #44edcf;/*couleur de selection des menus selectionnable a droite *#a0acc3;*/
color: #ffffff;/*#213458* couleur de fond du pied de page*/
}
 
/* Pied de page */
footer {
float: left;
background: #76f665;/*#213458* couleur de fond du pied de page*/
width: 960px;/*960px Largeur de mon pied de page*/
color: #Fe0303;/*#F0E7D4* couleur du texte de mon pied de page*/
margin-bottom: 10px;
/*ombrage du cadre*/
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
 
footer p {
text-align: center;
font-size: 11px;
}

Merci a tous.

**JefReb** · 03/10/2014, 20h56

Voici une solution, mais il faudra revoir les codes couleurs et la largeur des menus.
Le 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
/* nav */
nav {
background: #76f665;
margin: 0 auto;
width: 1040px;/*Largeur de la barre de menu*/
}
/*==================================================================================================*/
/*=========================  définition pour le menu =============================================  */
/*==================================================================================================*/
ul.menu       { margin:0; padding:0;                  /* marges extérieures et intérieures à zéro  */
                list-style-type:none;                 /* suppression des puces                     */
                text-align:center;                    /* centrage du texte                         */ 				 
              }                   
/*===================  définition du menu horizontalement ========================================  */
ul.menu li    { float:left; }                        /* alignement horizontal grâce au flottant    */
/*=========== Ecartement des éléments des menu et sous-menus =====================================  */
ul.menu li 	     { border-right:3px solid transparent;}                /* espacement droit        */ 
ul.menu li ul li { border-top:3px solid transparent;  }                /* espacement haut         */
ul.menu li ul ul { border-left:3px solid transparent; }                /*espacement gauche        */
/*=========================  définition des sous menus ===========================================  */
ul.menu ul       { margin:0; padding:0;               /*  marges extérieures et intérieures à zéro */
                   list-style-type:none;              /*  suppression des puces                    */
                   text-align:center; }               /*  centrage du texte                        */ 
ul.menu li ul    { width:140px; }                    
ul.menu li ul ul { margin:-28px 0 0 140px ; }         /*  top 25px+3px  et left 140px              */
/*======= Définition de la position et de la visibilité des sous-menus ===========================  */
ul.menu li ul    { position:absolute; top:auto; left:auto; }                 /*  Position absolu   */
ul.menu li ul    {visibility:hidden; }                    /* et Hop on cache les sous menus        */
/*============= Visibilité des sous menus au passge de la souris =================================  */
ul.menu li:hover ul     {visibility:visible; }                  /* Hop, menu B et menu C visible   */
ul.menu li:hover ul ul  {visibility:hidden;  }                  /* Hop, on cache le menu C         */
ul.menu li li:hover ul  {visibility:visible; }                  /* Hop, le menu C devient visible  */
 
ul.menu li a    { display:block;                                             
                  width:140px; height:25px; line-height:25px; margin:0; padding:0;        
                  text-decoration:none; background-color:#E0E0E0; color:#000; } 
/*============= classe .long pour titre menu de 200px  > 140px   =================================  */				  
ul.menu li.long a     { width:200px; } 
ul.menu li.long ul ul { margin:-28px 0 0 200px ; }         /*  top 25px+3px  et left 200px          */   
ul.menu a:hover { text-decoration:underline; background:#ccc; font-weight:bold; font-size:100%; color:#00F;  }
 
ul.menu a[href="#"]        { text-decoration:none; }
ul.menu a[href="#"]:hover  { color:white; font-weight:bold; background-color:#d2cdd1; }

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
<nav><!-- top nav -->
 
		<ul class="menu"><!--ligne des menus-->
			<li><a href="index.php">Acceuil</a></li>
			<li><a href="#">Agenda</a>
				<ul><!--ligne des sous menus-->
					<li><a href="Ventes.php">Vente</a></li>
					<li><a href="Manifestations.php">Manifestations</a></li>
					<li><a href="soirees.php">Soirée</a></li>
				</ul>
			</li>
			<li class="long"><a href="#">Manifestations en photos</a>
				<ul><!--ligne du menu-->
					<li><a href="#">Année 2013_2014</a>
						<ul><!--ligne des sous sous menus-->
							<li><a href="soiree_concert.php">Soirée concert</a></li>
						</ul>
					</li>
					<li><a href="annee2014_2015.php">Année 2014_2015</a></li>
				</ul>
			</li>
			<li><a href="mailto:sou.de.saint.pierre@gmail.com"title="sou des ecoles">Nous contactez</a></li>
		 </ul>
 
</nav><!-- end of top nav -->