Bonjour,
Je veux créer une liste à puces transformée en "menu déroulant" grace à hover j'écris le code ci-dessous pour afficher ma liste :
jusque la tout fonctionne bien...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79 <style type="text/css" media="all"> body { background-color:white; background-repeat:no-repeat; } #navigation { height:70px; width:100%; border-bottom:3px solid white; background-color:#4E0011; position:absolute; top:0px; left:0px; } ul ul { display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0; } ul.niveau2 { left: 0px; top: 22px; } ul.niveau3 { left: 144px; top: -1px; } li { position: relative; list-style-type: none; width: 140px; background-color: #E0E0E0; margin : 0px; padding: 2px; } li:hover ul.niveau2, li li:hover ul.niveau3 { display:block; } </style> <nav id="navigation"> <ul class="niveau1"> <li style="background-color:#4E0011; color:white; font-variant:small-caps; font-size:14px; margin:2px">Accueil <ul class="niveau2"> <li>Premier menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Second menu</li> <li>Troisieme menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Quatrième menu</li> </ul> </li> </ul> </nav>
Si je veux ajouter un second menu à droite du premier je copie-colle la premire partie de mon code et ajoute display:inline dans ma feuille de styles et la... le menu deroulant est d'une largeur limitée et tout s'affiche n'importe comment...
Voici :
Comment faire pour que le menu avec effet hover puissent se chevaucher et que ca 'affiche comme dans mon premier exemple ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100 <style type="text/css" media="all"> body { background-color:white; background-repeat:no-repeat; } #navigation { height:70px; width:100%; border-bottom:3px solid white; background-color:#4E0011; position:absolute; top:0px; left:0px; } ul ul { display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0; } ul.niveau2 { left: 0px; top: 22px; } ul.niveau3 { left: 144px; top: -1px; } li { position: relative; display : inline; list-style-type: none; width: 140px; background-color: #E0E0E0; margin : 0px; padding: 2px; } li:hover ul.niveau2, li li:hover ul.niveau3 { display:block; } </style> <nav id="navigation"> <ul class="niveau1"> <li style="background-color:#4E0011; color:white; font-variant:small-caps; font-size:14px; margin:2px">Accueil <ul class="niveau2"> <li>Premier menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Second menu</li> <li>Troisieme menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Quatrième menu</li> </ul> </li> <!-- Ici mon second menu --> <li style="background-color:#4E0011; color:white; font-variant:small-caps; font-size:14px; margin:2px">Accueil <ul class="niveau2"> <li>Premier menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Second menu</li> <li>Troisieme menu <ul class="niveau3"> <li>Inscription</li> <li>Mot de passe perdu</li> </ul> </li> <li>Quatrième menu</li> </ul> </li> </ul> </nav>
Merci d'avance pour vos réponses
Partager