Problème menu déroulant

Bonjour,

Lorsque je pointe la souris sur le menu, un sous-menu apparait.
Sous Firefox, Chrome, IE 9 et 8 tout fonctionne, mais sous IE 7 le sous-menu disparait si la souris descend dans le bas du sous-menu.

Voici mon code, vous pouvez le tester pour mieux comprendre :

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
<ul id="nav">
				<li>
					<a href="index.php" class="first-link"><span>Accueil</span></a>
				</li>
				<li>
					<a href="index.php" class="first-link"><span>Communauté</span></a>
					<ul>
						<div class="first">
							<div class="secondary">
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<li>qdsfqdsf</li>
								<div class="last"></div>
							</div>
						</div>
					</ul>
				</li>
				<li>
					<a href="index.php" class="first-link"><span>Mon compte</span></a>
 
				</li>
				<li>
					<a href="index.php" class="first-link"><span>Articles</span></a>
				</li>
				<li>
					<a href="index.php" class="first-link"><span>Support</span></a>
 
				</li>
			</ul>

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
#nav {
	list-style-type: none;
	height: 120px;
	width: 800px;
	margin: 0 225px;
	z-index: 90;
}
#nav li {
	float: left;
	margin-left: 5px;
	position: relative;
}
#nav li a.first-link {
	background: url(http://www.web-astronomie.fr/images/menu/menu-left.png) no-repeat left top;
	padding-left: 20px;
	position: relative;
	float: left;
	z-index: 100;
}
#nav li a.first-link span {
	background: url(http://www.web-astronomie.fr/images/menu/menu-right.png) no-repeat right top;
	padding: 0px 20px 0px 0px;
	cursor: pointer;
	line-height: 45px;
	height: 46px;
	color: #fff;
	float: left;
}
#nav li a.first-link:hover {
	background: url(http://www.web-astronomie.fr/images/menu/menu-left-hover.png) no-repeat left top;
}
#nav li a.first-link:hover span {
	background: url(http://www.web-astronomie.fr/images/menu/menu-right-hover.png) no-repeat right top;
}
#nav li ul {
	list-style-type: none;
	position: absolute;
	padding: 60px 0 0;
	margin: auto;
	top: 0;
	left: 0;
	width: 182px;
	float: left;
	display: none;
	z-index: 95;
}
#nav li:hover ul {
	display: block;
}
#nav .first {
	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-1.png);
	background-repeat: no-repeat;
	height: 15px;
	margin: 0px;
	width: 182px;
}
#nav .secondary {
	background: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-2.png) repeat-y -0px 0px;
	padding: 5px;
	margin-top: 15px;
	width: 182px;
	float: left;
}
#nav .last {
	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-3.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 7px;
	width: 182px;
	clear: both;
}
#nav ul li {
	float: left;
	display: block;
}
#nav li:hover ul li {
	float: none;
	display: block;
}

Merci d'avance pour vos réponses :(

Tu mets des <div> dans des <ul> ? :calim2:

Résolu

Problème résolu, c'était un problème de z-index, il manquait position:relative;
Et sinon les div dans les ul, c'est les images du bloc ul, mais j'ai enlevé ça, j'ai mis une image a chaque ul avec différente hauteur, le code est plus valide comme ça

Merci quand même :)