Bonjour,
Je souhaite réaliser un menu dépliant en CSS par la propriété over. Mon menu se trouve à gauche, les rubriques pointées dépliant les sous-rubriques en colonnes, et ces memes sous-rubriques doivent en déplier d'autres, mais cette fois-ci sur la droite:
----------------
|~~Menu~~~~|
---------------
|~Rubrique~~~|
|~~S-rubrique~|
|~~S-rubrique~~SS-rubrique
|~~~~~~~~~~SS-rubrique
|_____________|
Pour ce faire, je suppose que mes SS-rubriques doivent être en position relative pour se placer par rapport à leur S-rubrique, mais en meme temps, il faut qu'elles soient en position absolue pour se placer par dessus le menu et ne pas agrandir mon menu qui décalerai mon div de contenu, placé juste à droite du menu.
Comment faire ???
Car en position absolue, mes SS-rubriques se chevauchent, et cela m'oblige à faire des id plutot que des classes (donc une pour chaque SS-rubrique, c'est ennuyant ...).
Voici mon code html et CSS actuels, les classes réalisées se basant sur les <ul>:
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 <div id="menu"> <ul class="niveau1"> <li> Annuaire <ul class="niveau2"> <li><a href="index.php?page=groupe">Consulter</a></li> <li><a href="index.php?page=groupe&action=creer">Rechercher</a></li> </ul> </li> <li> Patrimoine <ul class="niveau2"> <li><a href="index.php?page=rubrique">Lister</a></li> <li><a href="index.php?page=rubrique&action=creer">Creer</a></li> </ul> </li> <li> News <ul class="niveau2"> <li>Sens <ul class="niveau3"> <li><a href="">Consulter</a></li> <li><a href="">Ecrire</a></li> </ul> </li> <li>Auxerre </li> </ul> </li> </ul> </div>Comment gérer le ul.niveau3 ???
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 #menu { width: 160px; height: 100%; float: left; margin: 0; padding: 0; color: red; font-weight: bold; border: 2px solid green; border-top: none; } #menu ul { list-style-type: none; margin-left: 0; } ul.niveau1 li { width: 132px; height: 40px; font-family: "Rockwell Extra Bold", Andalus, "Arial Black"; font-variant: small-caps; background-image: url("img/bouton1.jpeg"); background-repeat: no-repeat; line-height: 200%; margin-top: 20px; } ul.niveau1 li:hover ul.niveau2 { display: block; } ul.niveau2 { display: none; margin: 0; padding: 0; } ul.niveau2 li{ width: 132px; height: 40px; font-family: "Rockwell Extra Bold", Andalus, "Arial Black"; font-variant: small-caps; background-image: url("img/bouton1.jpeg"); background-repeat: no-repeat; line-height: 200%; margin: 10px; padding: 4px; } ul.niveau2 li a, ul.niveau2 li a:link, ul.niveau2 li a:visited{ color: green; display: block; text-decoration: none; } ul.niveau3 { margin: 0; padding: 0; display: none; } ul.niveau2 li:hover ul.niveau3 { display: block; }
Merci de vos remarques et réponses !
Partager