Détection hover sur menu déroulant
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 :
http://img690.imageshack.us/img690/2065/sanstitrevb.png
Voici les différents codes de mon site complet (site utilisé uniquement dans un but instructif et mémo-technique) :
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
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:
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 !
