Menu déroulant sous IE7

J'ai un menu déroulant et je ne peux atteindre certaines options sous IE7.
Sous Firefox tout fonctionne correctement.
Le déroulement est géré en JavaScript

Mon menu :

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
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none'; } 
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="SousMenu1.php">Sous menu</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Sous Menu 1.</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="Option1.php">Option 1 </a></li>
 
					<li><a href="Option2.php">Option 2</a></li>
					<li><a href="Option3.php">Option 3</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');" >Sous Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');"  onmouseout="javascript:montre('');">
				<ul>
					<li><a href="Option 4.php">Option 4.</a></li>
 
					<li><a href="Option 5.php">Option 5.</a></li>
					<li><a href="Option 6.php">Option 6.</a></li>
				</ul>
			</dd>
	</dl>
 
</div>

Ma feuille de style:

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
 
body {
margin: 0;
padding: 0;
background: #FEEEBC;
font: 12px verdana, sans-serif;
}
div#contenu {
	width:1200px;
	height:600px;
	top:70px;
	left:10px;
	float:left; 
	z-index: 1;
	position:absolute;
	}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width:100%;
top:0px;
z-index: 2;
float:left;
position:absolute;
}
#menu dl {
float: left;
width: 15em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #3B4E77;
color: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
color: #fff;
background: #3B4E77;
}
#menu li {
text-align: center;
background: #3B4E77;
margin: 10px;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #F2462E;
border-right: 1px solid #fff;
}

Ma page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
require('TestMenu_2.html');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="CSS/Menu_3.css" rel="stylesheet" type="text/css" />
<title>Test affiche menu</title>
</head>
 
<body>
<div id = "contenu">
  <form name="form1" method="post" action="">
    CECI EST UN TEST 
  </form>
</div>
</body>
</html>

A priori les options que je ne peux atteindre sont celles qui chevauchent le bloc "Contenu"

Bonjour
Est-ce-que tu as validé ton code CSS sur le site W3C??
Car d'un navigateur à l'autre, le code CSS n'est pas comprit de la même façon

Validation code CSS

J'ai validé le code CSS sur le site
http://jigsaw.w3.org/css-validator/
je n'ai aucune erreur.

Une page en ligne pour le test ?

Validation code CSS

Oui c'est via une page en ligne.