Bonjour,

Voilà j'ai un souci d'affichage de mon menu sous IE. En gros c'est un menu déroulant horizontal. En passant sur un bouton, un sous menu se déroule. Tout fonctionne parfaitement sur FF, jugez plutôt :

http://img694.imageshack.us/img694/5619/menuff.jpg

Par contre sous IE voici la cata :

http://img696.imageshack.us/img696/8956/menuie.jpg

Ici j'ai coloré en noir le premier <li> (#menu ul li) et en gris le 2eme <ul> (#menu ul li ul)

Je ne comprend pas pourquoi le bouton de droite (qui est en float:left) ne va pas par dessus la zone noir du <li> ?!

style.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
#menu {
	font: 10px Verdana, Arial, Helvetica, sans-serif ;
	font-weight:bold;
	display:inline;
}
 
#menu a{
	color: #FFFFFF;
	text-decoration:none;
	display:block;
}
 
#menu ul {
	width:1000px;
	margin:0;
	padding:0;
	margin-left:auto;
	margin-right:auto;
}
 
#menu li{
	display:inline;
	list-style-type:none; 
	float: left;
	width: 100px;
}
 
#menu ul li ul {
	display:none;
}
 
#menu ul li:hover ul {
	display:block; 
	width:215px;
	float:left;	
	overflow-y:auto;
	overflow-x:hidden;;
	height:256px;
}
 
#menu ul li ul li {
	padding-left:5px;
	padding-right:5px;
	padding-top:2px;
	padding-bottom:2px;
	width:190px;
	border-top: 1px solid #fff;
}
 
/* propriétés communes à tous les boutons : texte sur une ligne */
#menu #medailles, #menu #promos, #menu #statues, #menu #creches {
	background-repeat:no-repeat;
	float:left;
	width:100px;
	height:30px;
	text-align:center;	
	line-height: 30px;
	vertical-align:middle;
}
styleIE.css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
body {
	behavior: url("include/csshover3.htc");
}
 
#menu ul li:hover ul {
	margin:0px;
	padding:0px;
}
 
#menu ul li ul li {
	width:200px;		
}
menu.php
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
 
<html>
	<head>
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<!--[if IE]> <link rel="stylesheet" href="css/styleIE.css" type="text/css" media="screen" /> <![endif]-->
		<!-- <script type="text/javascript" src="javascript/script.js"></script>-->
	</head>
 
	<body>	
		<div id="menu">
		        <ul>
			<li><div id="promos"><a href="">PROMOTIONS</a></div></li>
			<li id="li_relig"><div id="relig"><a href="">ARTICLES RELIGIEUX</a></div>
				<ul>
				   <li>blabla</li>
				   <li>blabla</li>
				   <li>blabla</li>
				</ul>
			</li> 
			<li id="li_medailles"><div id="medailles"><a href="">MEDAILLES</a></div>
				<ul>
				   <li>blabla</li>
				   <li>blabla</li>
				   <li>blabla</li>
				</ul>
			</li>
				[...]
		       </ul>
		</div>
	</body>
</html>
Help me please !