Menu déroulant KO IE8

**Cram_N7** · 09/12/2010, 14h53

Bonjour,
je ne m'y connais pas des masses en CSS et j'ai une page html avec un menu déroulant qui est compatible IE6 (et 7 à ce qu'on m'a dit mais je n'ai pas pu vérifier).
Sous IE8 le menu ne se déroule pas. D'après mes recherches ça peut venir de "hover" ou de "z-index" mais je ne trouve pas de solution qui marche.

Pourriez-vous jeter un coup d'oeil svp ?

page HTML (extrait):

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
 
<html>
 
<head>
<link rel="stylesheet" href="menu_test.css" type="text/css">
</head>
 
<DIV align="CENTER">
<DIV style="height:30px;width:994px;">
<div class="menu">
			    <ul>
			      <li><a href="#">Administration<!--[if IE 7]><!--></a><!--<![endif]-->
			      <!--[if lte IE 6]><table><tr><td><![endif]-->
			        <ul>
			          <li><a href="#">Option 1</a></li>
			          <li><a href="#">Option 2</a></li>
			          <li><a href="#">Optionnel 3</a></li>
			        </ul>
			        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			      </li>
			    </ul> 
			  </div>
 
</DIV>
</DIV>
 
</body>
 
</html>

page CSS (complète) :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
*{padding:0; margin:0;}
 
.menu
{
	white-space:nowrap /*IE hack*/;
	float:left;
	border:none;
	font-size:130%;
	padding-left:650px;
}
 
.menu ul
{
	list-style-type:none;
}
 
.menu ul li
{
	background: url('../img/fleche_MenuHaut.gif') no-repeat 8px 11px;
	float:left;
	z-index:auto !important /*Non-IE6*/;
	z-index:1000 /*IE6*/;
}
 
.menu ul li a
{
	float:none !important /*Non-IE6*/;
	float:left /*IE-6*/;
	display:block;
	height:30px;
	line-height:30px;
	padding:0 16px 0 16px;
	text-decoration:none;
	font-weight:bold;
	color: red;
}
 
.menu ul li ul
{
	display:none;
	border:none;
}
 
/*Non-IE6 hovering*/
.menu ul li:hover
{
	position:relative;
}
 
.menu ul li:hover a
{
	text-decoration:none;
}
 
.menu ul li:hover ul
{
	display:block;
	width:10.0em;
	position:absolute;
	z-index:999;
	top:29px;
	margin-top:0.1em;
	left:0;
}
 
.menu ul li:hover ul li a
{
	white-space:normal;
	display:block;
	width:10.0em;
	height:auto;
	line-height:1.3em;
	margin-left:-1px;
	padding:4px 16px 4px 16px;
	border-left:1px solid #77554B;
	border-bottom: 1px solid #77554B;
	border-right:1px solid #77554B;
	background-color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color:#77554b;
}
 
.menu ul li:hover ul li a:hover
{
	background-color:#040D37;
	text-decoration:none;
}
 
/*IE6 hovering*/
.menu table
{
	position:absolute;
	top:-22;
	left:0;
	border-collapse:collapse;
}
 
.menu ul li a:hover
{
	position:relative /*IE hack*/;
	z-index:1000 /*IE hack*/;
	text-decoration:none;
}
 
.menu ul li a:hover ul
{
	display:block;
	width:10.0em;
	position:absolute;
	z-index:999;
	top:3.1em;
	left:0;
	margin-top:0.1em;
}
 
.menu ul li a:hover ul li a
{
	white-space:normal;
	display:block;
	width:10.0em;
	height:1px;
	line-height:1.3em;
	padding:4px 16px 4px 16px;
	border-left:1px solid #77554B;
	border-bottom:1px solid #77554B;
	border-right:1px solid #77554B;
	background-color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color:#77554b;
}
.menu ul li a:hover ul li a:hover
{
	background-color:#040D37;
	text-decoration:none;
}

Merci par avance à qui pourra me faire avancer !

**ciberrique** · 19/12/2010, 00h55

Bonsoir,

je pense qu'avec une bonne vieille entête xhtml tout ira mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Essaye ca, je pense cela t'aidera.

ps: attention comme tu dis que ton menu fonctionne sous ie6 et 7 j'ai pas testé.

Bonne soirée

Menu déroulant KO IE8

CSS

Discussions similaires

Partager

Partager