Détection hover sur menu déroulant

**Parojo** · 27/03/2010, 17h56

Bonsoir à tous,

Dans le cadre d'un cours de programmation web, nous avons travaillé sur du css et plus précisément, sur des menus déroulant. Je sais qu'il est plus facile de réaliser ceux-ci en javascript, et je suis également sur le point de m'instruire à ce sujet, mais j'aimerais tout de même une aide afin de comprendre ce qui ne va pas dans ma feuille de style.

Le problème est que lorsque je passe sur les liens de mon menu déroulant, de gauche à droite, il n'y a aucun problème, mais en revanche, lorsque je reviens en arrière, c'est comme si le menu suivant empêchait le hover d'être lu avant d'arriver à la moitié du menu suivant.

L'illustration suivante devrait vous aider à saisir davantage la nature du problème :

Voici les différents codes de mon site complet (site utilisé uniquement dans un but instructif et mémo-technique) :

HTML

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/1999/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" xml:lang="fr">
	<head>
		<title>Cours 2</title>
		<meta http-equiv="Content-Type"	content="text/html" charset=iso-8859-1"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id=fond>
			<div id=entete>
				<div id=logo>
 
				</div>
			</div>
			<div id=menu>
				<ul>
					<li class="menu1">menu 1
						<ul class="menu1">
							<li><a href="lien">menu 1.1</a></li>
							<li><a href="lien">menu 1.2</a></li>
							<li><a href="lien">menu 1.3</a></li>
						</ul>
					</li>
					<li>menu 2
						<ul>
							<li><a href="lien">menu 2.1</a></li>
							<li><a href="lien">menu 2.2</a></li>
						</ul>
					</li>
					<li>menu 3
						<ul>
							<li><a href="lien">menu 3.1</a></li>
							<li><a href="lien">menu 3.2</a></li>
							<li><a href="lien">menu 3.3</a></li>
						</ul>
					</li>
					<li>menu 4
						<ul>
							<li><a href="lien">menu 4.1</a></li>
							<li><a href="lien">menu 4.2</a></li>
							<li><a href="lien">menu 4.3</a></li>
							<li><a href="lien">menu 4.4</a></li>
							<li><a href="lien">menu 4.5</a></li>
							<li><a href="lien">menu 4.6</a></li>
							<li><a href="lien">menu 4.7</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id=marge>
				<ul>
					<li class="menu1">menu A
						<ul class="menu1">
							<li><a href="lien">menu A.a</a></li>
							<li><a href="lien">menu A.b</a></li>
							<li><a href="lien">menu A.c</a></li>
						</ul>
					</li>
					<li>menu B
						<ul>
							<li><a href="lien">menu B.a</a></li>
							<li><a href="lien">menu B.b</a></li>
						</ul>
					</li>
					<li>menu C
						<ul>
							<li><a href="lien">menu C.a</a></li>
							<li><a href="lien">menu C.b</a></li>
							<li><a href="lien">menu C.c</a></li>
						</ul>
					</li>
					<li>menu D
						<ul>
							<li><a href="lien">menu D.a</a></li>
							<li><a href="lien">menu D.b</a></li>
							<li><a href="lien">menu D.c</a></li>
							<li><a href="lien">menu D.d</a></li>
							<li><a href="lien">menu D.e</a></li>
							<li><a href="lien">menu D.f</a></li>
							<li><a href="lien">menu D.g</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id=contenu>
				contenu :
				test<br/>
			</div>
			<div id=pied>
				Copyright@ etc. Tous droits réservés
			</div>
		</div>
	</body>
</html>

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
a {
	text-decoration:none;
	color:white;
	}
 
html  {
	height:100%;
	margin:0;
	padding:0;
	}
 
body {
	height:100%;s
	margin:0;
	padding:0;
	background-color:#ffffff;
	background-image:url(images/wall.png);
	background-repeat:repeat-x;
	font-family:"arial";
	}
 
ul {
	margin:0px 0px;
	padding:0px;
	}
 
#fond {
	background-color:#5a5d98;
	text-align:left; /* Internet Explorer 6 et ultérieurs prennent les div comme du texte. Nous contredirons cet alignement plus bas */
	margin:0 auto;
	width:800px;
		}
#logo {
	background-color:#5a5d98;
	background-repeat:repeat-x;
	background-position:left bottom;
	background-image:url(images/rubanniere.png);
	float:left;
	height:100px;
	width:100px;
		}
#entete {
	background-position:bottom;
	background-color:5a5d98;
	background-repeat:no-repeat;
	height:100px;
		}
#menu {
	color:#fff;
	padding:0px 85px;
	background-color:#5a5d98;
	height:30px
		}
#contenu {
	background-color:#fff;
	width:550px;
	height:100%;
		}
#marge {
	height:100%;
	padding:10px 25px;
	background-color:#5a5d98;
	text-align:right;
	color:#fff;
	float:right;
	width:200px;
		}
#pied {
	padding-top:15px;
	color:#fff;
	clear:both;
	background-color:#5e6a9d;
	height:50px;
	text-align:center;
		}
 
#menu ul {
	padding:0px;
	margin:0px;
	}		
 
#menu ul li {
	display:inline;
	position:relative;
		}
 
#menu li li {
	padding:0px;
	width:100px;
	display:block;
	position:relative;
	left:46px;
	top:28px;
	background-color:#5a5d98;
		}		
 
#menu ul ul {
	padding:0px;
	display:none;
	position:absolute;
	top:0px;
	right:0px;
		}
 
#menu li{
	padding:0px 7px;
	padding-bottom:10px;
		}
 
#menu li:hover{
	background-color:#ccc;
		}
 
#menu li:hover ul {
	display:block;
		}

Je vous remercie d'avance pour votre aide !

**adiGuba** · 29/03/2010, 18h05

Salut,

Rajoutes le code CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu ul ul {
    border: 1px solid red;
}

Tu verras que tes sous-menu empiètes sur ton menu, qui du coup ne capte plus le hover.

En fait ton problème semble venir des codes suivants :

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
#menu li li {
	padding:0px;
	width:100px;
	display:block;
	position:relative;
	left:46px;
	top:28px;
	background-color:#5a5d98;
		}	
#menu ul ul {
	padding:0px;
	display:none;
	position:absolute;
	top:0px;
	right:0px;
		}

Tu places ton UL en haut à droite et tu décales chaque LI pour décaler ton "popup menu" par rapport à ton menu... Mais en réalité l'UL reste bien là !

A mon avis il serait préférable de positionner correctement le UL, puis de laisser les LI tel quel à l'intérieur, avec quelque chose comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#menu li li {
	padding:0;
	display:block;
}		
 
#menu ul ul {
	padding:0;
	display:none;
	position:absolute;
	left:46px;
	top:28px;
	width: 100px;
	background-color:#5a5d98;
}

(à adapter bien sûr)

a++

**Parojo** · 01/04/2010, 08h34

Merci beaucoup adiGuba ! Je viens d'adapter cela et le résultat est vraiment ce que j'attendais.

Détection hover sur menu déroulant

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager