Bonjour voila ça fais plusieurs semaine que je cherche et pas moyen de trouver sois il se déroule à moitié sois pas du tout, alors je me tourne vers ce forum mais croyez moi j'ai cherché....
Code html :
Code html :
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
|
<div id="menu">
<ul class="grand_generau">
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<ul>
<li><a href="">sous menu</a></li>
<ul>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<ul>
<li><a href="">sous sous sous menu</a></li>
<li><a href="">sous sous sous menu</a></li>
<li><a href="">sous sous sous menu</a></li>
<li><a href="">sous sous sous menu</a></li>
<li><a href="">sous sous sous menu</a></li>
</ul>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
</ul>
<li><a href="">sous menu</a></li>
<ul>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<ul>
<li><a href="">sous sous sous menu</a></li>
<li><a href="">sous sous sous menu</a></li>
</ul>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
<li><a href="">sous sous menu</a></li>
</ul>
</ul>
<li><a href="">Menu</a></li>
<ul>
<li><a href="">sous menu</a></li>
<li><a href="">sous menu</a></li>
<li><a href="">sous menu</a></li>
<li><a href="">sous menu</a></li>
</ul>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<ul>
<li><a href="">sous menu</a></li>
<li><a href="">sous menu</a></li>
</ul>
</ul>
</div> |
Code 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
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
|
/* !!!!!!!!!!!!!!!!!!!CORP!!!!!!!!!!!!!!!!! */
body
{
width: 990px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
/* background-image: url("../images/general/background.jpg"); Une petite image de fond pour éviter d'avoir un vieux fond blanc :p à changer */
}
/* !!!!!!!!!!!!!!!!!!!!! HEADER !!!!!!!!!!!!!!!!!! */
#en_tete
{
width: 990px;
height: 250px;
background-image: url("../images/general/header.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}
/* M-------------E----------------N-----------------U */
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 25px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
width: 1000px;
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 21px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 198px; /* largeur */
}
#menu ul ul /*on cache les sous menus et les sous sous menu */
{
display: none;
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 200px; /* Largeur des sous-listes */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 200px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover
{
background-color: #fff;
font-size : 25px;
color: #000;
}
div#menu ul li:hover ul
{
display:block;
}
/* Pour les liens !!!!!!! (modifiable) ----------- */
a:link {
font-family:arial, sans-serif;
font-size:95%;
color:white;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:arial, sans-serif;
font-size:95%;
color:white;
background-color:transparent;
text-decoration:none;
} |
Voila je ne veux pas utiliser de Javascript juste du css et du html !
Merci infiniment de votre aide
27/06/2011, 23h30
Menu déroulant se déroule à moitié
00
