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 :
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 :
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 !
09/12/2010, 14h53
Menu déroulant KO IE8
00
