Menu déroulant en css compatible ie8

**totofe49** · 02/05/2011, 15h19

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 :

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
 
<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>

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

Commence par mettre un DOCTYPE à ton document :

http://xhtml.developpez.com/faq/?page=doctype-standards

http://j-willette.developpez.com/tut...ge=page_1#LI-C

**totofe49** · 02/05/2011, 15h53

bonjour,
j'ai insérer un doctype mais cela ne change rien

**Bisûnûrs** · 02/05/2011, 16h01

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.

**totofe49** · 02/05/2011, 16h16

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
 
<!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

**totofe49** · 02/05/2011, 17h18

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

merci

Menu déroulant en css compatible ie8

CSS

Discussions similaires

Partager

Partager