Menu déroulant en css compatible ie8 [Résolu]

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

02/05/2011, 15h42	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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
	00

02/05/2011, 15h53	#3
totofe49 Futur Membre du Club Inscription : mai 2007 Messages : 115 Détails du profil Informations forums : Inscription : mai 2007 Messages : 115 Points : 19 Points : 19	bonjour, j'ai insérer un doctype mais cela ne change rien
	00

02/05/2011, 16h01	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

02/05/2011, 17h18	#6
totofe49 Futur Membre du Club Inscription : mai 2007 Messages : 115 Détails du profil Informations forums : Inscription : mai 2007 Messages : 115 Points : 19 Points : 19	c'était trop beau ! lorsque je replace mon menu dans mon site en construction, ca ne marche plus ! rrrrrrrrrrrrrr ! merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email