Explications concises menu déroulant en CSS
Bonjour à tous.
J'ai suivi le tutorial du site pour créer un menu déroulant rien qu'en css.
J'ai retouché le code pour le mettre à ma manière mais il est vrai que certaines choses sont floues.
J'aimerai savoir qu'elles propriétés font qu'un menu rien qu'en css sera un menu déroulant horizontal ou vertical (déploiement)
Ce que j'arrive à faire c'est un menu horizontal qui se déplie verticalement et un menu vertical qui se déplie verticalement.:cry:
Mais Vertical -- > déploiement horizontale Comment faire ??
Je pense que c'est une histoire de float et de position et peut être de display non?
Merci de votre aide
Voici ce à quoi j'arrive : ICI
Voici le code du menu HTMl
Code:
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
|
<ul id="menuDeroulant">
<li><a href="#">Accueil</a> <!-- Nom du premier menu --></li>
<li><a href="#">Comite</a> <!-- Nom du deuxieme menu -->
<ul class="sousMenu">
<li><a href="#">Dates et reunions</a></li>
<li><a href="#">Bureau directeur</a></li>
<li><a href="#">Conseil d'administration</a></li>
<li><a href="#">Commissions</a></li>
</ul>
</li>
<li><a href="#">Competitions</a> <!-- Nom du troisieme menu -->
<ul class="sousMenu">
<li><a href="#">Rencontres</a></li>
<li><a href="#">InterComites</a></li>
<li><a href="#">Gest'hand</a></li>
<li><a href="#">Calendrier</a></li>
<li><a href="#">Sanctions</a></li>
</ul>
</li>
<li><a href="#">Formations</a> <!-- Nom du quatrieme menu -->
<ul class="sousMenu">
<li><a href="#">Joueurs</a></li>
<li><a href="#">Animateurs</a></li>
<li><a href="#">Arbitres</a></li>
<li><a href="#">Diverses</a></li>
<li><a href="#">Anim'Hand</a></li>
</ul>
</li>
<li><a href="#">Annuaire Clubs</a> <!-- Nom du cinquieme menu --></li>
<li><a href="#">Ressources</a> <!-- Nom de premier menu -->
<ul class="sousMenu">
<li><a href="#">Memento</a></li>
<li><a href="#">Modèles à télécharger</a></li>
<li><a href="#">Partenaires du comité</a></li>
</ul>
</li>
</ul> |
Et là le CSS
Code:
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
|
@charset "utf-8";
/* CSS Document */
#menuDeroulant
{
width: 960px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
font: 12px verdana, sans-serif;
text-align: center;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
float: none;
width: 150px;
margin: 0;
padding: 0;
border: 0;
left: 50%;
right: 50%;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
display: none; /* rendre invisble les sous */
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
float: none;
margin-left: 150px;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent; /* 1px solid transparent */
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background-image:url(fondT.png);
margin: 0;
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
float : none;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat; /* Image de fond des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }
/* --------------------------------------------- */ |
