Bonjour à tous,
Je rencontre un probleme lors de la création d'un menu déroulant. Il s'affiche parfaitement bien sous Firefox, mais il y'a un décalage qui se produit sur IE. Une image étant plus causante, regardez ci-dessous:


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
 
#head1 {
	display: block;
	width: 562px;
	height: 138px;
	float: left;
}
#head2 {
	display: block;
	width: 214px;
	height: 138px;
	float: left;	
	background:  url('../img/header-flash.gif');
}
/*Menu deroulant*/
#menu {
	position:relative;
	margin-top: 0px;
	margin-left: 0px;
	top: 0;
	left: 0;
	z-index:200;
	width: 100%;
	overflow: hidden;
	display: block;
}
#menu dl {
	float:left;
	width: 187px;
	display: block;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	width: 184px;
	height: 28px;
	line-height: 31px;
	margin-left: 3px;
	background:  url('../img/menubut.gif');
	overflow: hidden;
	display: block;
}
#menu dt.on {
	background-position: 0 20px;
	color: white;
}
#menu dd {
	border: 1px solid gray;
	margin-left: 2px;
}
#menu li {
	text-align: center;
	background: #fff;
	list-style-type: none;
}
#menu li a, #menu dt a {
	text-decoration: none;
	color: #000;
	height: 100%;
	border: 0 none;
	display: block;
}
#menu li a:hover, #menu dt a:hover {
	background: #eee;
}
 
a {
	text-decoration: none;
	color: black;
	color: #222;
}
/*barre de sous menu*/
#submenu {
 
	clear:left;
	background:  url('../img/submenu.gif');
	height: 35px;
	overflow:hidden;
	z-index:100;
}
#submenu ul {
	list-style: none;
	display: block;
}
#submenu li {
	display: inline;
	font-size: 80%;
}
#submenu a {
	color: #fff;
	text-decoration: none;
	font-size: 95%;
	display: block;
	float: left;
	height: 35px;
	line-height: 38px;
	font-weight: bold;
	padding-left: 28px;
	padding-right: 5px;
}
#submenu a:hover {
	text-decoration: underline;
}
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
 
<div id=head1>
		<div id=header>
			<h1><a title=Estima>Estima</a></h1>
		</div>
		<div id="menu">
			<dl>			
				<dt onMouseOver="javascript:montre('smenu1');" id="on" border="0">Menu 1</dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
 
						</ul>
					</dd>
			</dl>	
			<dl>	
				<dt onMouseOver="javascript:montre('smenu2');">Menu 2</dt>
					<dd id="smenu2">
						<ul>
							<li><a href="#">Sous-Menu 2.1</a></li>
							<li><a href="#">Sous-Menu 2.2</a></li>
							<li><a href="#">Sous-Menu 2.3</a></li>
 
						</ul>
					</dd>
			</dl>
 
			<dl>	
				<dt onMouseOver="javascript:montre('smenu3');">Menu 3</dt>
					<dd id="smenu3">
 
						<ul>
							<li><a href="#">Sous-Menu 3.1</a></li>
							<li><a href="#">Sous-Menu 3.2</a></li>
							<li><a href="#">Sous-Menu 3.3</a></li>
 
						</ul>
					</dd>
			</dl>
		</div>
	</div>
	<div id=head2>&nbsp;</div>
<div id=submenu>
	<ul>
	  <li><a class=sub1 title="" href="#">vous decrivez 
	  votre besoin</A> 
	  <li><a class=sub2 title="" href="#">rub1</a> 
	  <li><a class=sub3 title="" href="#">rub2</a> 
	  <li><a class=sub4 title="" href="#">rub3</a> </li>
	</ul>
</div>
J'ai essayer de jouer sur z-index, mais rien n'y fait.
Merci d'avance.