Menu déroulant en CSS

**ellocodu59** · 02/05/2008, 11h44

Bonjour,
j'ai un petit problème par rapport à mon menu déroulant en CSS : il y a toujours un petit espace entre les boutons du menu, ils ne sont pas joints.
Je vous envoie ma feuille de style et ma page de code PHP.

Feuille de styles CSS :

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
101
102
103
104
105
106
107
108
109
 #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 : 21px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#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 : 12px; /* 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 */ 
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 130px; /* largeur */
}
 
#menu li /* Elements des listes */ 
{ 
float :left; 
background:url("image/fd_p3d.jpg");
width:150px;
}
 
#menu li ul /* Sous-listes */
{ 
position: absolute; /* Position absolu */
width: 120px; /* Largeur des sous-listes */
left: -90em; /* Hop, on envoi loin du champ de vision */
}
 
#menu ul a:hover
{
background:#EEE8AA;
color:black;
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 0; /* Corrige un bug sous IE */
}
 
#sousmenu1
{
position:absolute;
left:7px;
 
}
 
#sousmenu1 li a:hover
{
width:188px;
}
 
#sousmenu1 li
{
width:188px;
text-align:center;
}
 
#sousmenu2
{
position:absolute;
left:197px;
}
 
#sousmenu2 li
{
width:130px;
}
 
#sousmenu3
{
position:absolute;
left:325px;
top:8px;
}
 
#sousmenu4
{
position:absolute;
left:448px;
top:8px;
}
 
#sousmenu5
{
position:absolute;
left:584px;
top:8px;
}
 
#sousmenu6
{
position:absolute;
left:718px;
top:8px;
}

Page de code PHP :

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
 <html>
<head>
<link href="essai.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1"><a href="#"><img src="image/menu/menu1.jpg"></a>
<ul>
<li><center><a href="#">Ecole</a></center></li>
<li><center><a href="#">Formation</a></center></li>
<li><center><a href="#">Equipe</a></center></li>
<li><center><a href="#">Contact</a></center></li>
<li><center><a href="#">Diplômés</a></center></li>
<li><center><a href="#">Débouchés</a></center></li> 
</ul> 
</div>
</li>
<li>
<div id="sousmenu2"><a href="#"><img src="image/menu/menu2.jpg"></a>
<ul>
<li><a href="#">Emploi</a></li>
<li><a href="#">Stage</a></li>
<li><a href="#">Pôle avenir</a></li>
<li><a href="#">Junior entreprise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Les entreprise</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Communication</a></li> 
</ul>
</div>
</li>
<li>
<div id="sousmenu3"><a href="#"><img src="image/menu/menu3.jpg"></a></div>
</li>
<li>
<div id="sousmenu4"><a href="#"><img src="image/menu/menu4.jpg"></a></div>
</li>
<li>
<div id="sousmenu5"><a href="#"><img src="image/menu/menu5.jpg"></a></div>
</li>
<li>
<div id="sousmenu6"><a href="#"><img src="image/menu/menu6.jpg"></a></div>
</li>
</ul>
</body>
</html>

**Er3van** · 02/05/2008, 12h35

Euh, franchement c'est un peu nawak ton code...

Le positionnement absolu n'est pas vraiment une bonne idée, du moins dans la façon dont tu t'en sers. Tu mélanges em et px, quand un élément doit disparaitre tu le sors de l'écran plutôt que de faire un display:none....Ca marche, certes, mais c'est pas vraiment propre au niveau du code.

Il y a pleins de tutos simples pour les menus, je te conseille d'en suivre un

Menu déroulant en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager