Menu déroulant en css compatible ie8

Version imprimable

bonjour,

j'ai un menu déroulant qui s'affiche correctement avec FF mais avec IE8, impossible d'afficher les sous-menus déroulant qui ont la propriété display: none;
Au passage de la souris j'ai insérer ce code :

#menuPrincipal ul li:hover > ul.smenu {
display: block;
}

merci de votre aide

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
 
<html>
<head>
<style>
#menuPrincipal {
	width: 658px; height: 37px;
	background-color: red;
}
	#menuPrincipal ul {
		float: left;
		list-style-type: none;
		margin: 0 0 0 40px; padding: 0;
	}
	#menuPrincipal ul li {
		float: left;
		height: 28px;
		padding: 9px 25px 0 0;
		text-align: center;
	}
	#menuPrincipal ul, #menuPrincipal ul li a {
		color: #FFFFFF; font-size: 16px; text-decoration: none;
	}
	#menuPrincipal ul li ul.smenu {
		display: none; 
		width: 320px; 
		position: absolute; z-index: 99999999;
		padding: 5px; margin: -1px 0 0 -11px; margin-left: 0;
		background-color: #FFFFFF;
		border: 1px solid #BDD3EA;
	}
	#menuPrincipal ul li ul.smenu li {
		width: 340px; height: 15px;
		text-align: left; line-height: 10px;
		padding: 5px; margin: 0;
	}
	#menuPrincipal ul li ul.smenu li.srubrique {
		color: #0195C5; font-size: 18px;
		border: 0;
	}
	#menuPrincipal ul li ul.smenu li a {
		color: #0195C5;
		font-size: 12px; line-height: 12px;
	}
	#menuPrincipal ul li ul.smenu li a:hover {
		font-weight: bold;
	}
	#menuPrincipal ul li:hover > ul.smenu { 
		display: block; 
	}
</style>
</head>
<body>
 
<div id="menuPrincipal">
<ul>
	<li><a href="#" title="'">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
	<li><a href="#" title="'">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
	<li><a href="#" title="'">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
</ul>
</div>
 
</body>

02/05/2011, 15h42
Bisûnûrs

Commence par mettre un DOCTYPE à ton document :

:arrow: http://xhtml.developpez.com/faq/?page=doctype-standards
:arrow: http://j-willette.developpez.com/tut...ge=page_1#LI-C
02/05/2011, 15h53
totofe49

bonjour,
j'ai insérer un doctype mais cela ne change rien
02/05/2011, 16h01
Bisûnûrs

Oui, enfin, de mon côté j'ai inséré un DOCTYPE aussi et ça fonctionne très bien. Donc merci de montrer ton code avec le DOCTYPE, je parie que tu le mets mal.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<head>
<style>
#menuPrincipal {
	width: 658px; height: 37px;
	background-color: red;
}
	#menuPrincipal ul {
		float: left;
		list-style-type: none;
		margin: 0 0 0 40px; padding: 0;
	}
	#menuPrincipal ul li {
		float: left;
		height: 28px;
		padding: 9px 25px 0 0;
		text-align: center;
		position: relative;
	}
	#menuPrincipal ul, #menuPrincipal ul li a {
		color: #FFFFFF; font-size: 16px; text-decoration: none;
	}
	#menuPrincipal ul li ul.smenu {
		display: none; 
		width: 350px; 
		position: absolute; z-index: 99999999; left: 0; top: 28px;
		padding: 10px 0 0 0; margin-top: 8px; margin-left: 0;
		background-color: #FFFFFF;
		border: 1px solid #0195C5;
	}
	#menuPrincipal ul li ul.smenu li {
		width: 340px; height: 15px;
		text-align: left; line-height: 10px;
		padding: 5px; margin: 0;
	}
	#menuPrincipal ul li ul.smenu li.srubrique {
		color: #0195C5; font-size: 18px;
		border: 0;
	}
	#menuPrincipal ul li ul.smenu li a {
		color: #0195C5;
		font-size: 12px; line-height: 12px;
	}
	#menuPrincipal ul li ul.smenu li a:hover {
		font-weight: bold;
	}
	#menuPrincipal li:hover > ul.smenu { 
		display: block;
	}
 
</style>
 
</head>
<body>
 
<div id="menuPrincipal">
<ul>
	<li><a href="#" title="">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
	<li><a href="#" title="'">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
	<li><a href="#" title="'">Rubrique1</a>
		<ul class="smenu">
			<li class="srubrique">Sous-rubrique 1</li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
			<li><a href="#" title="">Page 1</a></li>
		</ul>
	</li>
</ul>
</div>
 
</body>

effectivement ca marche bien avec ce doctype, merci

02/05/2011, 17h18
totofe49

c'était trop beau !
lorsque je replace mon menu dans mon site en construction, ca ne marche plus !
rrrrrrrrrrrrrr !

merci