Menu déroulant CSS

**Lionz** · 31/07/2008, 01h17

Bonjour,

Je me suis basé sur le menu déroulant que l'on trouve ici :
http://css.developpez.com/tutoriels/menu-deroulant/
ex fini : http://css.developpez.com/tutoriels/...enu01test.html

Mon problème est le suivant : il n'y a pas d'image en dessous de la liste qui se déroule comme c'est l'exemple dans le tutos avec l'image de la balle de golf. A la place de cette image j'ai du texte. Or lorsque le menu se déroule, si je veux cliquer sur un élément de la liste qui se déroule cette dernière disparait dès que je passe au dessus du texte audessus duquel passe la liste déroulante. Je suis convaincu qu'il s'agit d'une histoire de priorité, j'ai essayé avec z-index mais cela ne semble pas fonctionner.

le code 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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@charset "utf-8";
/* Design CSS de Guka */
body
{
   width: 879px;
   margin : auto;
   margin-top : 30px;
   font-family: calibri, arial;
}
 
h1
{
	font-family:Calibri,arial;
	text-indent: 50px;
	font-size:18px;
	text-decoration:underline;
}
 
h2
{
	font-family:Calibri,arial;
	font-size:16px;
}
 
 
#cochon
{
	width: 879;
	height: 268px;
	background-image:url(images/decoupe/banniere.png);
}
 
#piedcochon
{
	float:left;
	width:207px;
	height:33px;
	background-image:url(images/decoupe/piedcochon.png);
 
}
 
#navi
{
	float:right;
	width:672px;
	height: 33px;
	background-image:url(images/decoupe/navi.png);
	margin-top:0px;
 
}
 
#menuDeroulant
{
	z-index:10;
	margin-top:4px;
	margin-left:0px;
	list-style-type: none;
	padding-left: 0px;
}
 
#menuDeroulant li
{
	float: left;
	width: 120px;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color:#FFFFFF;
	border-right: 1px solid #FFFFFF;
	text-decoration: none;
	margin: 0;
	padding-left:8px;
}
 
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background:url(images/fondTR.png) repeat;
 
}
#menuDeroulant .sousMenu li a:hover
{
	z-index:9;
	background-image: none;
	background-color: #FF0000;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }
 
#content
{
	z-index:0;
	margin-top:33px;
	background-image:url(images/decoupe/content.png);
	background-repeat:repeat-y;
}
 
#diaporama
{
	border:solid 1px #FF0000;
	margin-top:15px;
	margin-left: 75px;
	margin-right:10px;
	margin-bottom: 10px;
	float:left;
}
 
#txtcontent
{
 
	padding-top:0px;
	margin-top:10px;
	margin-left:75px;
	padding-right:40px;
	text-align:justify;
 
}
 
#footer
{
	background-image:url(images/decoupe/footer.png);
	background-repeat:no-repeat;
}

Le code HTML :

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
 
<body>
 
 
<div id="cochon">
</div>
 
 
<div id="piedcochon">
</div>
 
<div id="navi">
<ul id="menuDeroulant">
<!-- menu déroulant basé sur http://css.developpez.com/tutoriels/menu-deroulant/ -->
		<li>
			<a href="#">Home</a>
		</li>
 
		<li>
			<a href="#">Produits</a>
			<ul class="sousMenu">			      
				<li><a href="#">Salaisons</a></li>
				<li><a href="#">Jambons</a></li>
				<li><a href="#">Pâtés</a></li>
				<li><a href="#">Pâtés (petites terrines)</a></li>
				<li><a href="#">Gibier et Festivités</a></li>
                <li><a href="#">Libre service</a></li>
                <li><a href="#">Découpe</a></li>
			</ul>
		</li>
 
        <li>
			<a href="#">Qualité</a>
		</li>
 
		<li>
			<a href="#">Contact</a>
		</li>
	</ul>
</div>
 
<div id="content">
	<div id="diaporama">
 
    <!-- fonctionnement du diapo utiliser : slideshow.xml et dewslider.swf-->
    <object type="application/x-shockwave-flash" data="dewslider.swf?xml=slideshow.xml&amp;transition=fade&amp;speed=20&amp;timer=4" width="200" height="162"><param name="movie" value="dewslider.swf?xml=slideshow.xml&amp;transition=fade&amp;speed=20&amp;timer=4" /></object>
    </div>
 
    <div id="txtcontent">
 
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
 
<div id="footer">
Lorem ipsum dolor sit amet
</div>
 
</body>

Quelqu'un saurait il m'aider? Je suis sûr que c'est une bêtise mais bon...
Merci.

**b_zakaria** · 31/07/2008, 16h04

Salut,

tout d'abord, pour que ça fonctionne bien, tu devras télécharger deux images :
fondTR et fond.

Bien sûr, les fichiers (page html, fichier css et les deux images) doivent être dans la même racine à moins que tu ne veuilles changer leur emplacement. Dans ce cas, il faut changer le chemin vers les images.

Bon courage.

**Lionz** · 31/07/2008, 17h38

Heu... en fait ce n'est pas ça mon problème.

Le menu je l'ai adapté pour mon site. J'ai bien sûr gardé un fondTR que j'ai modifié pour correspondre au design de mon site. Mais il n'y a pas le fond avec la balle de golf, à la place il y a du texte. Or lorsque le menu se déroule et que je descend avec ma souris pour survoler les éléments du menu déroulant et que j'arrive au dessus de ce texte, la liste se referme. Pour moi c'est une histoire de priorité : puisque l'exporateur reconnait d'abord que je survole le contenu de mon <div id="content"> avant de reconnaitre que je survole les élément déroulant de la barre de navigation...

Je pensais pouvoir régler ça avec z-index mais ça ne résout rien...

**b_zakaria** · 01/08/2008, 16h54

Voici un début:

Ceci est la page HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Testos</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<meta name="robots" content="all">
	<link rel="stylesheet" type="text/css" href="menu01.css" title="default" media="screen">
</head>
 
 
<body>
 
	<ul id="menuDeroulant">
		<li>
 
			<a href="#">Les castors</a>
			<ul class="sousMenu">
				<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
				<li><a href="#">Ils confectionnent des barrages !</a></li>
				<li><a href="#">Ils ont des grandes dents</a></li>		
			</ul>
		</li>
 
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
 
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>
			<ul class="sousMenu">			      
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
 
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>				
				<li><a href="#">raisins</a></li>
				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
 
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">tomates</a></li>
 
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>				
				<li><a href="#">courgettes</a></li>
				<li><a href="#">endives</a></li>
 
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
	</ul>
<div id="texte">
je ne sais pas quoi écrire je ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrireje ne sais pas quoi écrire
</div>
</body></html>

Et ceci la 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
body {
 font: 11px verdana, sans-serif;
 background: #AFA99B;
 margin: 0;
 padding: 0;
}
 
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
#texte{
position:relative;
z-index:1;
}
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	position:absolute;
	z-index:2;
	background: #6A6458;
	width: 644px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

Bon courage...

**b_zakaria** · 01/08/2008, 16h57

... après t'auras qu'à changer la couleur d'arrière-plan des listes qui se déroulent (tu peux les mettre en transparence) !!!
Bon courage

**Lionz** · 13/08/2008, 15h37

Malheureusement le problème reste le même : sous mozilla tout est ok mais pas sous IE... Il y a toujours ce problème de priorité dans les sous menu.

Pour code source :
le HTML : http://lionelcouvreur.be/Guka/home.html
le CSS : http://lionelcouvreur.be/Guka/designgeneral.css

Merci

Menu déroulant CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager