Adaptation d'un CSS (centrage vertical)

**Zebulon777** · 02/12/2016, 13h23

Bonjour à tous,

je ne suis pas un pro du CSS, loin de là, mais j'y travaille, mais là je bloque.
Pour tout dire, j'avoue que j'ai récupéré un menu tout fait sur le net, mais je coince dans son adaptation.

Nom : Menu00.png
Affichages : 124
Taille : 17,9 Ko

Nom : Menu00.png
Affichages : 124
Taille : 17,9 Ko

1 - je n'arrive pas à centrer verticalement les petites images dans la barre de menu.
2 - même problème pour l'indicateur de sous menu : on voit bien que le rond est décalé.

Merci d'avance pour votre aide.

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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
 
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
 
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
z-index:100;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 0px;
/*  font-family: 'Open Sans', Helvetica, sans-serif;*/
  font-family: Arial;
 
/*  background: #3db2e1;
  background: -o-linear-gradient(top, #69c4e8, #21a1d4);
  background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
  background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
  background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
  background: linear-gradient(to bottom, #69c4e8, #21a1d4);
  box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
*/  
  background: #002f47;
  background: -o-linear-gradient(top, #002f47, #002f47);
  background: -ms-linear-gradient(top, #002f47, #002f47);
  background: -webkit-linear-gradient(top, #002f47, #002f47);
  background: -moz-linear-gradient(top, #002f47, #002f47);
  background: linear-gradient(to bottom, #002f47, #002f47);
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 3px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*  font-weight: 700;*/
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 3px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
/*  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
/*  border-top-color: #19799f;*/
  border-top-color: #002f47;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 8px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 19px; /* Positionnement du premier niveau de menu */
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 182px; /* Positionnement du menu de deuxième niveau */
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 190px;
  padding: 7px 25px; /* Espacement de chaque valeur du menu */
  font-size: 12px;
/*  font-weight: 700;*/
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
/*  background: #3db2e1;*/
  background: #002f47;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*  box-shadow: inset 0 2px 2px #88d0ed;*/
  box-shadow: inset 0 2px 2px #002f47;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
/*  box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);*/
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
/*
  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
/*  border-left-color: #1c89b5;*/
  border-left-color: #002f47;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
/*  border-right-color: #1c89b5;*/
  border-right-color: #002f47;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
z-index:100;
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
z-index:100;
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*    font-weight: 700;*/
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
/*    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
    background: #002f47;
    background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
/*    border-top-color: #19799f;*/
    border-top-color: #002f47;
  }
}

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
 
  <TABLE id="TAB_Menu" width="100%" border="0" align="center" cellpadding="1" cellspacing="1">
    <TR id="TAB_Menu_Lig01" align="center" valign="middle" bgcolor="#002f47">
      <TD colspan="6">
        <DIV id='cssmenu'>
          <UL>
            <LI ><A href="javascript:void(0)" title="Afficher/Cacher" onClick="CacherParametres()"><IMG id="IMG_Fleche" width="20" height="20" src="../Images/Fleche gauche grise.png"/></A> </LI>
            <LI ><A href='../Entract.html'><IMG src="../Images/Accueil_16x16.png" /> Accueil</A> </LI>
            <LI ><A href='../Entract.html'><IMG src="../Images/Aeroport_16x16_2.png" /> Aéroports</A>
              <UL>
                <LI><A href='#'>Région Parisienne</A>
                  <UL>
                    <LI><A href='ParisRP.html?_PARAM_=CDG'>Paris-Charles de Gaulle</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=LBG'>Paris-Le Bourget</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=ORY'>Paris-Orly</A></LI>
                  </UL>
                </LI>
                <LI><A href='BaleMulhouse.html?_PARAM_=BALEMULHOUSE'>Bâle-Mulhouse</A> </LI>
                <LI><A href='Beauvais.html?_PARAM_=BEAUVAIS'>Beauvais-Tillé</A> </LI>
                <LI><A href='Bordeaux.html?_PARAM_=BORDEAUX'>Bordeaux-Mérignac</A> </LI>
                <LI><A href='Lyon.html?_PARAM_=LYON'>Lyon-Saint Exupéry</A> </LI>
                <LI><A href='Marseille.html?_PARAM_=MARSEILLE'>Marseille-Provence</A> </LI>
                <LI><A href='Nantes.html?_PARAM_=NANTES'>Nantes-Atlantique</A> </LI>
                <LI><A href='Nice.html?_PARAM_=NICE'>Nice-Côte d'Azur</A> </LI>
                <!--         <LI><A href='Strasbourg.html?_PARAM_=STRASBOURG'>Strasbourg-Entzheim</A>
         </LI>
-->
                <LI><A href='Toulouse.html?_PARAM_=TOULOUSE'>Toulouse-Blagnac</A> </LI>
              </UL>
            </LI>
            <LI id="LI_Infos"><A href='javascript:Infos()'><IMG src="../Images/Infos_16x16.png" /> Informations</A> </LI>
            <!--     <LI><A href='../Aide.html'><IMG src="../Images/Aide_16x16.png" /> Aides</A>
     </LI>
-->
            <LI><A href='../APropos.html'><IMG src="../Images/APropos01_16x16.png" /> A Propos / Aide</A></LI>
          </UL>
        </DIV>
      </TD>
    </TR>
    <TR id="TAB_Menu_Lig02">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
    <!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3 <!-- TemplateEndEditable -->
    <TR id="TAB_Menu_Lig03">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
  </TABLE>

Invité · 02/12/2016, 14h03

Bonjour,

Envoyé par Zebulon777

...j'ai récupéré un menu tout fait sur le net...

Tu n'aurais pas dû...

Ton code semble tout droit sorti de fouilles archologiques dans les tréfonds du web du siècle dernier... :

utilisation de <table> pour la mise en page
balises et attributs obsolètes
noms des balises en majuscules
...

Bon. Après avoir pleuré, je te propose quelques codes sympas :

Menu avec icônes animé

L'idée est de ne PAS metre les icônes dans des balises <img>, mais en background via pseudo-élément a:before.
Et, pour le centrage vertical : top: 50%; margin-top: -13px; (demi-hauteur de l'icone)

Code html :

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

1
2
3
4
5
6
<ul>
  <li class="trophees"><a href="#">Trophées</a></li>
  <li class="livres active"><a href="#">Livres</a></li>
  <li class="news"><a href="#">News</a></li>
  <li class="faq"><a href="#">FAQ</a></li>
</ul>

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
ul {
  list-style: none;
  width: 20em;
}
li a {
  position: relative;
  display: block;
  text-align: center;
  padding:20px;
  padding-left:40px;
}
 
/* ICONES */
li a:before {
  position: absolute;
  content: '';
  top: 50%; margin-top: -13px;
  left: 5px;
  width: 27px;
  height: 27px;
}
li.trophees a:before {
  background: url(http://www.developpez.net/forums/images/ranks/embleme-trophee1.png) no-repeat;
}
li.livres a:before {
  background: url(http://www.developpez.net/forums/images/ranks/embleme-redacteur.png) no-repeat;
}
li.news a:before {
  background: url(http://www.developpez.net/forums/images/ranks/embleme-chroniqueur.png) no-repeat;
}
li.faq a:before {
  background: url(http://www.developpez.net/forums/images/ranks/embleme-faq.png) no-repeat;
}
 
/* ANIMATION des TEXTES */
li a {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
li.active a,
li:hover a {
  padding-right:40px;
  padding-left:10px;
}
 
/* ANIMATION des ICONES */
li a:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
li.active a:before,
li:hover a:before {
  left:100%; margin-left: -37px;/*largeur icone + 10px*/
  -ms-transform: rotate(720deg);
  /* IE 9 */
  -webkit-transform: rotate(720deg);
  /* Chrome, Safari, Opera */
  transform: rotate(720deg);
}
 
/* un peu de déco.. */
li a {
  font-family:arial,sans-serif;
  background: #eef;
  text-decoration: none;
  color:darkblue;
  font-weight: normal;
}
li:hover a,
li.active a {
  background: #efe;
  color:green;
}
li.active a {
  font-weight: bold;
  font-size:120%;
}

Et aussi :

**Zebulon777** · 02/12/2016, 14h24

Tout d'abord, merci bien de ton aide.

Je sais que je n'aurai pas du, mais je fais avec les moyens du bord...

- utilisation de <table> pour la mise en page : je ne sais pas faire autrement...
- balises et attributs obsolètes : heu... Pour ma défense, ce n'est pas mon boulot au départ

mais j'essaye de me soigner petit à petit...

- noms des balises en majuscules : oui, ça je sais, j'assume, je trouve que c'est plus lisible avec Dreamweaver.

Le menu que tu me proposes est très sympa, mais je doute qu'il plaise à mon chef

Il veux vraiment un menu en ligne ; dans l'administration (ministère), on ne fait vraiment pas ce qu'on veux

**Zebulon777** · 02/12/2016, 14h41

J'essaye d'adapter ton code au mien, mais ce n'est pas une réussite ! Aie aie aie !

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
 
#cssmenu.li a {
  position: relative;
  display: block;
  text-align: center;
  padding:20px;
  padding-left:40px;
}
 
#cssmenu.li a:before {
  position: absolute;
  content: '';
  top: 50%; 
  margin-top: -13px;
  left: 5px;
  width: 27px;
  height: 27px;
}
 
#cssmenu.li.accueil a:before {
	background: url("Images/Accueil_16x16.png") no-repeat;
}

Je me retrouve sans icône et avec "ACCUEIL" collé en haut de la ligne de menu.

Invité · 02/12/2016, 15h18

Code :

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

	background: url("Images/Accueil_16x16.png") no-repeat;

Tel qu'écrit là, le dossier "Images" est dans le m^me dossier que le fichier CSS.
Est-ce le cas ?

Sinon, avec cette arborescence :

(dossier "css") -> fichier style.css
(dossier "Images") -> les images

Il faut écrire le chemin relatif :

Code :

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

	background: url("../Images/Accueil_16x16.png") no-repeat;

Pour le reste..... un code CSS ne sert à rien sans le code HTML associé.

**Zebulon777** · 02/12/2016, 15h33

Bon, j'ai réussit à avancer un peu, mais j'ai des trucs bizarres

Nom : Menu01.png
Affichages : 94
Taille : 62,8 Ko

Je me retrouve avec le petit triangle indiquant la présence d'un sous-menu à gauche alors qu'il doit être à droite (voir juste à gauche de AEROPORTS et à gauche de REGION PARISIENNE)
Et l'image utilisée pour les aéroports est répétée sur tous les items du menu.

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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
 
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
 
#cssmenu.li a {
  position: relative;
  display: block;
  text-align: center;
  padding:20px;
  padding-left:40px;
}
 
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  top: 50%; 
  margin-top: -10px;
  left: 5px;
  width: 50px;
  height: 32px;
}
 
#cssmenu li.accueil a:before {
	background: url("../../Images/Accueil_16x16.png") no-repeat;
}
#cssmenu li.aeroport a:before {
	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
}
#cssmenu li.apropos a:before {
	background: url("../../Images/APropos01_16x16.png") no-repeat;
}
#cssmenu li.info a:before {
	background: url("../../Images/Infos_16x16.png") no-repeat;
}
 
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
z-index:100;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 0px;
/*  font-family: 'Open Sans', Helvetica, sans-serif;*/
  font-family: Arial;
/*  background: #3db2e1;
  background: -o-linear-gradient(top, #69c4e8, #21a1d4);
  background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
  background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
  background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
  background: linear-gradient(to bottom, #69c4e8, #21a1d4);
  box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
*/  
  background: #002f47;
  background: -o-linear-gradient(top, #002f47, #002f47);
  background: -ms-linear-gradient(top, #002f47, #002f47);
  background: -webkit-linear-gradient(top, #002f47, #002f47);
  background: -moz-linear-gradient(top, #002f47, #002f47);
  background: linear-gradient(to bottom, #002f47, #002f47);
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 3px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*  font-weight: 700;*/
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 3px; /* Position du rond du menu principal qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
/*  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
/*  border-top-color: #19799f;*/
  border-top-color: #002f47;
}
#cssmenu ul ul {
  text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 10px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 15px; /* Positionnement du premier niveau de menu */
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 205px; /* Positionnement du menu de deuxième niveau */
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 215px; /* largeur du sous-menu */
  padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
  font-size: 12px;
/*  font-weight: 700;*/
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
/*  background: #3db2e1;*/
  background: #002f47;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*  box-shadow: inset 0 2px 2px #88d0ed;*/
  box-shadow: inset 0 2px 2px #002f47;
  padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
/*  box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);*/
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
/*
  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
/*  border-left-color: #1c89b5;*/
  border-left-color: #002f47;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
/*  border-right-color: #1c89b5;*/
  border-right-color: #002f47;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
z-index:100;
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
z-index:100;
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*    font-weight: 700;*/
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
/*    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
    background: #002f47;
    background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
/*    border-top-color: #19799f;*/
    border-top-color: #002f47;
  }
}

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
 
  <TABLE id="TAB_Menu" width="100%" border="0" align="center" cellpadding="1" cellspacing="1">
    <TR id="TAB_Menu_Lig01" align="center" valign="middle" bgcolor="#002f47">
      <TD colspan="6" >
        <DIV id='cssmenu'>
          <UL>
            <LI ><A href="javascript:void(0)" title="Afficher/Cacher" onClick="CacherParametres()"><IMG id="IMG_Fleche" width="20" height="20" src="../Images/Fleche gauche grise.png"/></A> </LI>
<!--            <LI ><A href='../Entract.html'><IMG src="../Images/Accueil_16x16.png" /> Accueil</A> </LI>-->            
			<LI class="accueil"><A href='../Entract.html'> Accueil</A> </LI>
<!--            <LI ><A href='../Entract.html'><IMG src="../Images/Aeroport_16x16_2.png" /> Aéroports</A>-->
            <LI class="aeroport"><A href='../Entract.html'> Aéroports</A>
              <UL>
                <LI><A href='#'>Région Parisienne</A>
                  <UL>
                    <LI><A href='ParisRP.html?_PARAM_=CDG'>Paris-Charles de Gaulle</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=LBG'>Paris-Le Bourget</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=ORY'>Paris-Orly</A></LI>
                  </UL>
                </LI>
                <LI><A href='BaleMulhouse.html?_PARAM_=BALEMULHOUSE'>Bâle-Mulhouse</A> </LI>
                <LI><A href='Beauvais.html?_PARAM_=BEAUVAIS'>Beauvais-Tillé</A> </LI>
                <LI><A href='Bordeaux.html?_PARAM_=BORDEAUX'>Bordeaux-Mérignac</A> </LI>
                <LI><A href='Lyon.html?_PARAM_=LYON'>Lyon-Saint Exupéry</A> </LI>
                <LI><A href='Marseille.html?_PARAM_=MARSEILLE'>Marseille-Provence</A> </LI>
                <LI><A href='Nantes.html?_PARAM_=NANTES'>Nantes-Atlantique</A> </LI>
                <LI><A href='Nice.html?_PARAM_=NICE'>Nice-Côte d'Azur</A> </LI>
                <!--         <LI><A href='Strasbourg.html?_PARAM_=STRASBOURG'>Strasbourg-Entzheim</A>
         </LI>
-->
                <LI><A href='Toulouse.html?_PARAM_=TOULOUSE'>Toulouse-Blagnac</A> </LI>
              </UL>
            </LI>
<!--            <LI id="LI_Infos"><A href='javascript:Infos()'><IMG src="../Images/Infos_16x16.png" /> Informations</A> </LI>-->
            <LI class="info" id="LI_Infos"><A href='javascript:Infos()'> Informations</A> </LI>
                        <!--     <LI><A href='../Aide.html'><IMG src="../Images/Aide_16x16.png" /> Aides</A>
     </LI>
-->
<!--            <LI><A href='../APropos.html'><IMG src="../Images/APropos01_16x16.png" /> A Propos / Aide</A></LI>-->
            <LI class="apropos"><A href='../APropos.html'> A Propos / Aide</A></LI>
          </UL>
        </DIV>
      </TD>
    </TR>
    <TR id="TAB_Menu_Lig02">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
    <!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3 <!-- TemplateEndEditable -->
    <TR id="TAB_Menu_Lig03">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
  </TABLE>

**NoSmoking** · 03/12/2016, 08h40

Bonjour,

Envoyé par Zebulon777

1 - je n'arrive pas à centrer verticalement les petites images dans la barre de menu.

un simple et basique

Code :

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

1
2
3
li img {
  vertical-align: middle;
}

ne fonctionne pas ?

Invité · 03/12/2016, 09h11

Bonjour,

@NoSmoking
Ce ne sont pas les "images", mais les "icônes" (a:before)

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  top: 50%; 
  margin-top: -10px;
  left: 5px;
  width: 50px;
  height: 32px;
}

1/ Si j'en crois les noms des icones (Accueil_16x16.png,...), elles font 16 x 16px.

width: 16px; height: 16px;
le margin-top doit être de la moitié, soit -8px (pas -10px)

2/ Tu les veux à droite ?

il faut remplacer left: 5px; par right:5px;

DONC :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  display: block; /* à ajouter */
  width: 16px;
  height: 16px;
  top: 50%; 
  margin-top: -8px; /* - moitié de la hauteur */
  right: 5px; /* à droite */
}

Du coup, on augmente le padding à droite :

Code css :

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

1
2
3
4
#cssmenu li a {
...
  padding-right:40px;
}

**NoSmoking** · 03/12/2016, 14h23

@NoSmoking
Ce ne sont pas les "images", mais les "icônes" (a:before)

ma réponse est basée sur le code initiale et ce qui me surprendra toujours c'est que l'on ne pense pas à vertical-align: middle pour centrer les <img> dans un texte.

**miss_socrates** · 05/12/2016, 06h11

Tout à fait d'accord avec NoSmoking, pour le vertical-align: middle , que ce soit pour les images ou des icônes, ça revient au même.
Par contre, je suis moins chaud pour les margin-top pour centrer, car si l'icône fait 16px de haut, si on met un margin de 8px en haut (et donc 8 aussi en bas), ça n'ira pas ! Et puis surtout ces margin risquent d'être galère soit qu'on utilise un tout petit ou un grand écran.
Je préfère line-height qui va centrer aussi bien le texte que l'icône. Si celle-ci fait 16px, on peut laisser un peu d'espace en haut et en bas et écrire:
line-height: 1.4em

**Zebulon777** · 05/12/2016, 08h29

Alors tout d'abord, merci à tous de prendre du temps pour m'aider.

J'ai essayé de prendre en compte vos différentes remarques, mais je dois passer à côté de quelque chose :

Nom : Menu02.png
Affichages : 112
Taille : 19,2 Ko

Nom : Menu02.png
Affichages : 112
Taille : 19,2 Ko

Dans les cercles rouges, on voit bien que l'icône après "AEROPORTS" n'est pas centrée, alors que celle après "REGION PARISIENNE" l'est.
Dans les cercles bleus, on voit la répétitions de l'icône, mais en fait, il faut que cette icône n'apparaisse QUE dans la menu de premier niveau ET rester sur la gauche.
On m'impose que le premier niveau du menu doit faire 32px de haut.

Je vous remets les différents codes :

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
 
  <TABLE id="TAB_Menu" width="100%" border="0" align="center" cellpadding="1" cellspacing="1">
    <TR id="TAB_Menu_Lig01" align="center" valign="middle" bgcolor="#002f47">
      <TD colspan="6" >
        <DIV id='cssmenu'>
          <UL>
            <LI ><A href="javascript:void(0)" title="Afficher/Cacher" onClick="CacherParametres()"><IMG id="IMG_Fleche" width="10" height="10" src="../Images/Fleche gauche grise.png"/></A> </LI>
<!--            <LI ><A href='../Entract.html'><IMG src="../Images/Accueil_16x16.png" /> Accueil</A> </LI>-->            
			<LI class="accueil"><A href='../Entract.html'> Accueil</A> </LI>
<!--            <LI ><A href='../Entract.html'><IMG src="../Images/Aeroport_16x16_2.png" /> Aéroports</A>-->
            <LI class="aeroport"><A href='../Entract.html'> Aéroports</A>
              <UL>
                <LI><A href='#'>Région Parisienne</A>
                  <UL>
                    <LI><A href='ParisRP.html?_PARAM_=CDG'>Paris-Charles de Gaulle</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=LBG'>Paris-Le Bourget</A></LI>
                    <LI><A href='ParisRP.html?_PARAM_=ORY'>Paris-Orly</A></LI>
                  </UL>
                </LI>
                <LI><A href='BaleMulhouse.html?_PARAM_=BALEMULHOUSE'>Bâle-Mulhouse</A> </LI>
                <LI><A href='Beauvais.html?_PARAM_=BEAUVAIS'>Beauvais-Tillé</A> </LI>
                <LI><A href='Bordeaux.html?_PARAM_=BORDEAUX'>Bordeaux-Mérignac</A> </LI>
                <LI><A href='Lyon.html?_PARAM_=LYON'>Lyon-Saint Exupéry</A> </LI>
                <LI><A href='Marseille.html?_PARAM_=MARSEILLE'>Marseille-Provence</A> </LI>
                <LI><A href='Nantes.html?_PARAM_=NANTES'>Nantes-Atlantique</A> </LI>
                <LI><A href='Nice.html?_PARAM_=NICE'>Nice-Côte d'Azur</A> </LI>
                <!--         <LI><A href='Strasbourg.html?_PARAM_=STRASBOURG'>Strasbourg-Entzheim</A>
         </LI>
-->
                <LI><A href='Toulouse.html?_PARAM_=TOULOUSE'>Toulouse-Blagnac</A> </LI>
              </UL>
            </LI>
<!--            <LI id="LI_Infos"><A href='javascript:Infos()'><IMG src="../Images/Infos_16x16.png" /> Informations</A> </LI>-->
            <LI class="info" id="LI_Infos"><A href='javascript:Infos()'> Informations</A> </LI>
                        <!--     <LI><A href='../Aide.html'><IMG src="../Images/Aide_16x16.png" /> Aides</A>
     </LI>
-->
<!--            <LI><A href='../APropos.html'><IMG src="../Images/APropos01_16x16.png" /> A Propos / Aide</A></LI>-->
            <LI class="apropos"><A href='../APropos.html'> A Propos / Aide</A></LI>
          </UL>
        </DIV>
      </TD>
    </TR>
    <TR id="TAB_Menu_Lig02">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
    <!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3 <!-- TemplateEndEditable -->
    <TR id="TAB_Menu_Lig03">
      <TD width="200"></TD>
      <TD ></TD>
      <TD ></TD>
      <TD ></TD>
      <TD width="130"></TD>
    </TR>
  </TABLE>

Code css :

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

Invité · 05/12/2016, 09h10

Objnour *,

1er niveau seulement :

Code :

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

1
2
3
4
#cssmenu > ul { ... }
#cssmenu > ul > li { ... }
#cssmenu > ul > li > a { ... }
...

2ème niveau :

Code :

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

1
2
3
4
#cssmenu > ul > li > ul { ... }
#cssmenu > ul > li > ul > li { ... }
#cssmenu > ul > li > ul > li > a { ... }
...

* Oui, pas encore pris mon café du matin...

**Zebulon777** · 05/12/2016, 09h41

Super, ça avance.

Pour n'avoir les icônes QUE au premier niveau, j'ai modifié comme ça :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#cssmenu ul > li.accueil > a:before {
	background: url("../../Images/Accueil_16x16.png") no-repeat;
}
#cssmenu ul > li.aeroport > a:before {
	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
}
#cssmenu ul > li.apropos > a:before {
	background: url("../../Images/APropos01_16x16.png") no-repeat;
}
#cssmenu ul > li.info > a:before {
	background: url("../../Images/Infos_16x16.png") no-repeat;
}

Nom : Menu03.png
Affichages : 118
Taille : 14,6 Ko

Mais l'icône sur le menu "AEROPORTS" est toujours à droite ???

Invité · 05/12/2016, 09h51

Si tu ne montres que des extraits de ton code CSS, on ne peut pas te dire où est l'erreur...

D'autre part, il serait GRAND TEMPS de faire un peu de LECTURE :

Les meilleurs cours et tutoriels pour apprendre le CSS

**Zebulon777** · 05/12/2016, 09h54

Oups...

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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
 
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
 
#cssmenu.li a {
  position: relative;
  display: block;
  text-align: center;
/*  padding:0px;*/
/*  padding-left:40px;*/
 }
 
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  display: block; /* à ajouter */
  width: 16px;
  height: 16px;
  top: 50%; 
  margin-top: -8px; /* - moitié de la hauteur */
  left: 5px; /* icône à gauche */
}
 
/* PREMIER NIVEAU DU MENU */ 
#cssmenu > ul,
#cssmenu > ul > li,
#cssmenu > ul > li > a
{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 1.4em
}
 
#cssmenu ul > li.accueil > a:before {
	background: url("../../Images/Accueil_16x16.png") no-repeat;
}
#cssmenu ul > li.aeroport > a:before {
	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
}
#cssmenu ul > li.apropos > a:before {
	background: url("../../Images/APropos01_16x16.png") no-repeat;
}
#cssmenu ul > li.info > a:before {
	background: url("../../Images/Infos_16x16.png") no-repeat;
}
 
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
z-index:100;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 0px;
/*  font-family: 'Open Sans', Helvetica, sans-serif;*/
  font-family: Arial;
/*  background: #3db2e1;
  background: -o-linear-gradient(top, #69c4e8, #21a1d4);
  background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
  background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
  background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
  background: linear-gradient(to bottom, #69c4e8, #21a1d4);
  box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
*/  
  background: #002f47;
  background: -o-linear-gradient(top, #002f47, #002f47);
  background: -ms-linear-gradient(top, #002f47, #002f47);
  background: -webkit-linear-gradient(top, #002f47, #002f47);
  background: -moz-linear-gradient(top, #002f47, #002f47);
  background: linear-gradient(to bottom, #002f47, #002f47);
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 10px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*  font-weight: 700;*/
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 3px; /* Position du rond du menu principal qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
/*  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
/*  border-top-color: #19799f;*/
  border-top-color: #002f47;
}
#cssmenu ul ul {
  text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 10px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 25px; /* Positionnement du premier niveau de menu */
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 205px; /* Positionnement du menu de deuxième niveau */
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 215px; /* largeur du sous-menu */
  padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
  font-size: 12px;
/*  font-weight: 700;*/
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
/*  background: #3db2e1;*/
  background: #002f47;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*  box-shadow: inset 0 2px 2px #88d0ed;*/
  box-shadow: inset 0 2px 2px #002f47;
  padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
/*  box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);*/
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
/*
  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
/*  border-left-color: #1c89b5;*/
  border-left-color: #002f47;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
/*  border-right-color: #1c89b5;*/
  border-right-color: #002f47;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
z-index:100;
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
z-index:100;
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*    font-weight: 700;*/
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
/*    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
    background: #002f47;
    background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
/*    border-top-color: #19799f;*/
    border-top-color: #002f47;
  }
}

Invité · 05/12/2016, 10h05

Envoyé par Zebulon777

Mais l'icône sur le menu "AEROPORTS" est toujours à droite ???

Laquelle ?

Dans le CSS donné, je n'en vois* que 4... et toutes sur le menu niveau 1.

*du moins, leurs noms (tu as conscience qu'on n'a pas accès à ton ordinateur, donc pas non plus aux icones...)

[EDIT] Si tu parles donc du 1er niveau (menu horizontal), avec le code fourni, les 4 icones sont bien toutes à gauche : http://codepen.io/jreaux62/pen/womKBg

**Zebulon777** · 05/12/2016, 10h20

Oui, ce que tu montres correspond bien, c'est bien ça, mais dan mon code, comme il y a un sous-menu pour AEROPORTS, ça ajoute un petit triangle à gauche qui vient en superposition de l'icône.
En fait, il faudrait que ce triangle soit à droite, dans le rond.
Idem pour le sous-menu "REGION PARISIENNE"

Nom : Menu04.png
Affichages : 84
Taille : 17,3 Ko

Nom : Menu04.png
Affichages : 84
Taille : 17,3 Ko

Oui, oui, je lis bien les tutos, mais j'avoue avoir du mal à m'en sortir.
J'avance petit à petit.

Voila la dernière version du 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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
 
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
 
#cssmenu.li a {
  position: relative;
  display: block;
  text-align: center;
/*  padding:0px;*/
/*  padding-left:40px;*/
 }
 
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  display: block; /* à ajouter */
  width: 16px;
  height: 16px;
  top: 50%; 
  margin-top: -8px; /* - moitié de la hauteur */
  left: 5px; /* icône à gauche */
}
 
/* PREMIER NIVEAU DU MENU */ 
#cssmenu > ul,
#cssmenu > ul > li,
#cssmenu > ul > li > a
{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 1em;
 }
 
/* IMAGES A INSERER DANS LE PREMIER NIVEAU DU MENU */
#cssmenu ul > li.accueil > a:before {
	background: url("../../Images/Accueil_16x16.png") no-repeat;
}
#cssmenu ul > li.aeroport > a:before {
	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
}
#cssmenu ul > li.apropos > a:before {
	background: url("../../Images/APropos01_16x16.png") no-repeat;
}
#cssmenu ul > li.info > a:before {
	background: url("../../Images/Infos_16x16.png") no-repeat;
}
 
 
 
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
/*  line-height: 1.4em*/
  display: block;
  z-index:100;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 0px;
/*  font-family: 'Open Sans', Helvetica, sans-serif;*/
  font-family: Arial;
/*  background: #3db2e1;
  background: -o-linear-gradient(top, #69c4e8, #21a1d4);
  background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
  background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
  background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
  background: linear-gradient(to bottom, #69c4e8, #21a1d4);
  box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
*/  
  background: #002f47;
  background: -o-linear-gradient(top, #002f47, #002f47);
  background: -ms-linear-gradient(top, #002f47, #002f47);
  background: -webkit-linear-gradient(top, #002f47, #002f47);
  background: -moz-linear-gradient(top, #002f47, #002f47);
  background: linear-gradient(to bottom, #002f47, #002f47);
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 10px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*  font-weight: 700;*/
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 3px; /* Position du rond du menu principal qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
/*  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
/*  border-top-color: #19799f;*/
  border-top-color: #002f47;
}
#cssmenu ul ul {
  text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 10px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 25px; /* Positionnement du premier niveau de menu */
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 205px; /* Positionnement du menu de deuxième niveau */
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 215px; /* largeur du sous-menu */
  padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
  font-size: 12px;
/*  font-weight: 700;*/
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
/*  background: #3db2e1;*/
  background: #002f47;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*  box-shadow: inset 0 2px 2px #88d0ed;*/
  box-shadow: inset 0 2px 2px #002f47;
  padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
/*  box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);*/
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
/*
  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
/*  border-left-color: #1c89b5;*/
  border-left-color: #002f47;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
/*  border-right-color: #1c89b5;*/
  border-right-color: #002f47;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
z-index:100;
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
z-index:100;
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*    font-weight: 700;*/
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
/*    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
    background: #002f47;
    background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
/*    border-top-color: #19799f;*/
    border-top-color: #002f47;
  }
}

Invité · 05/12/2016, 10h29

Dans le code HTML, il n'y a nulle part de classe "has-sub".
Je suppose donc qu'elle est générée dynamiquement en JavaScript.
Si je la rajoute manuellement :

Code :

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

<LI class="aeroport has-sub">.....

En effet, il y a un problème !

Il faut remplacer :

Code css :

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

1
2
3
4
5
6
#cssmenu ul > li.has-sub > a:before {
...
}
#cssmenu ul > li.has-sub:hover > a:before {
...
}

par :

Code css :

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

1
2
3
4
5
6
#cssmenu ul > li.has-sub > a:after {
...
}
#cssmenu ul > li.has-sub:hover > a:after {
...
}

A mon avis, à force de triturer ton code, tu ne maitrises plus rien...
Notamment, la gestion des pseudo-éléments :before et :after (qui permettent ici de mettre 2 icones sur un même élément)

Donc, je te conseille de reprendre ton code de zéro :

garde le code actuel "de coté", en le NETTOYANT des bouts de code unutiles
remet les bouts de code, en partant du niveau 1,
et progressivement le niveau 2, puis le niveau 3.

**Zebulon777** · 05/12/2016, 10h41

Nom : Menu05.png
Affichages : 111
Taille : 15,5 Ko

Génial, c'est presque ça

Le petit triangle, semble est bien à droite, mais il ne se met pas dans le rond ?

Oui, effectivement, il y a des ajouts dynamiques, mais je dois avouer que j'ai complètement oublié de mettre le code.

Je suis entrain de reprendre le CSS petit à petit, ce qui me permet d'apprendre en même temps et y a du boulot, je le reconnais

Le nouveau 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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
 
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
 
#cssmenu.li a {
  position: relative;
  display: block;
  text-align: center;
/*  padding:0px;*/
/*  padding-left:40px;*/
 }
 
/* ICONES */
#cssmenu li a:before {
  position: absolute;
  content: '';
  display: block; /* à ajouter */
  width: 16px;
  height: 16px;
  top: 50%; 
  margin-top: -8px; /* - moitié de la hauteur */
  left: 5px; /* icône à gauche */
}
 
/* PREMIER NIVEAU DU MENU */ 
#cssmenu > ul,
#cssmenu > ul > li,
#cssmenu > ul > li > a
{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 1em;
}
 
/* IMAGES A INSERER DANS LE PREMIER NIVEAU DU MENU */
#cssmenu ul > li.accueil > a:before {
	background: url("../../Images/Accueil_16x16.png") no-repeat;
}
#cssmenu ul > li.aeroport > a:before {
	background: url("../../Images/Aeroport_16x16_2.png") no-repeat;
}
#cssmenu ul > li.apropos > a:before {
	background: url("../../Images/APropos01_16x16.png") no-repeat;
}
#cssmenu ul > li.info > a:before {
	background: url("../../Images/Infos_16x16.png") no-repeat;
}
 
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
z-index:100;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 0px;
/*  font-family: 'Open Sans', Helvetica, sans-serif;*/
  font-family: Arial;
/*  background: #3db2e1;
  background: -o-linear-gradient(top, #69c4e8, #21a1d4);
  background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
  background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
  background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
  background: linear-gradient(to bottom, #69c4e8, #21a1d4);
  box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
*/  
  background: #002f47;
  background: -o-linear-gradient(top, #002f47, #002f47);
  background: -ms-linear-gradient(top, #002f47, #002f47);
  background: -webkit-linear-gradient(top, #002f47, #002f47);
  background: -moz-linear-gradient(top, #002f47, #002f47);
  background: linear-gradient(to bottom, #002f47, #002f47);
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, inset 0 2px 2px #002f47, inset 1px 0 2px #002f47, inset -1px 0 2px #002f47, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 10px 30px; /* Hauteur de la barre de menu et espacement entre les valeurs*/
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*  font-weight: 700;*/
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px; /* Position du rond qui contient la flêche d'indication de sous-menu => VOIR LIGNE 90 et 118 */
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 3px; /* Position du rond du menu principal qui contient la flêche d'indication de sous-menu => VOIR LIGNE 84 et 118 */
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
/*  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 11px;
  top: 10px; /* Position de la flêche d'indication de sous-menu => VOIR LIGNE 84 et 90 */
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:after {
/*  border-top-color: #19799f;*/
  border-top-color: #002f47;
}
#cssmenu ul ul {
  text-transform: uppercase; /* Met en majuscule le 2ème niveau de menu*/
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 10px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 25px; /* Positionnement du premier niveau de menu */
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 205px; /* Positionnement du menu de deuxième niveau */
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 215px; /* largeur du sous-menu */
  padding: 7px 25px; /* Espacement de chaque valeur du sous-menu */
  font-size: 12px;
/*  font-weight: 700;*/
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
/*  background: #3db2e1;*/
  background: #002f47;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #002f47; /*#B9121B;*/ /*#cae5fd;*/ /* Couleur du texte sélectionné */
  background:white;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
/*  box-shadow: inset 0 2px 2px #88d0ed;*/
  box-shadow: inset 0 2px 2px #002f47;
  padding-top:13px; /* permet de centrer verticalement la flêche du sous-menu */
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
/*  box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);*/
  box-shadow: inset 0 -3px 0 #002f47, inset 0 -3px 3px #002f47, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
/* Position du rond du 2ème niveau du menu */
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9px;
/*
  background: #3db2e1;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
  background: #002f47;
  background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
  box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
/*  border-left-color: #1c89b5;*/
  border-left-color: #002f47;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
/*  border-right-color: #1c89b5;*/
  border-right-color: #002f47;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
z-index:100;
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
z-index:100;
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
/*    font-weight: 700;*/
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
/*    background: #3db2e1;
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
*/
    background: #002f47;
    background: -webkit-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -ms-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -moz-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: -o-linear-gradient(top, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    background: linear-gradient(to bottom, #002f47 0%, #002f47 25%, #002f47 50%, #002f47 75%, #002f47 100%);
    box-shadow: inset 0 -1px 1px #002f47, inset 0 2px 1px #002f47;
 
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
/*    border-top-color: #19799f;*/
    border-top-color: #002f47;
  }
}

Le code Javascript, au cas où :

Code javascript :

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
 
(function($) {
 
  $.fn.menumaker = function(options) {
 
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);
 
      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });
 
        cssmenu.find('li ul').parent().addClass('has-sub');
 
        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };
 
        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');
 
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
 
        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }
 
          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
 
      });
  };
})(jQuery);
 
(function($){
$(document).ready(function(){
 
$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});
 
 
});
})(jQuery);

Invité · 05/12/2016, 13h06

Tu n'as pas suivi mon conseil.

Je ne vais pas tout faire, ni te prendre par la main...

Adaptation d'un CSS (centrage vertical)

Centrer un élément en CSS

Discussions similaires

Partager

Partager