[DOCTYPE / IE / CSS] Menu déroulant / problème avec IE
Bonjour,
J'ai un problème avec un menu horizontal déroulant...
Avec Firefox, ça fonctionne parfaitement, avec IE le sous-menu s'affiche mais disparaît lorsque l'on essaye d'y accéder (lorsqu'on descend le curseur de la souris), comme si on perdait l'état de "mouse over".
l'HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul id="menu">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Sous-Menu 1</a></li>
<li><a href="">Sous-Menu 2</a></li>
<li><a href="">Sous-Menu 3</a></li>
<li><a href="">Sous-Menu 4</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 6</a></li>
</ul> |
Le CSS
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
| #menu {
position: absolute;
left: 62px;
top: 141px;
border: 0;
}
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu a {
display: block;
text-decoration: none;
color: #334;
padding: 0;
border-bottom: 2px solid #fff;
padding-bottom: 2px;
}
#menu li {
float: left;
padding: 0 44px 0 0;
}
#menu a:hover {
padding-bottom: 2px;
border-bottom: 2px solid #0055a0;
}
#menu li ul {
position: absolute;
padding-top: 13px;
margin: 0;
display: none;
}
#menu li ul li {
padding: 0;
margin: 0;
background: #f9f9f9;
}
#menu li ul li a, #menu li ul li a:hover{
width: 136px;
padding: 9px 7px;
border-bottom: 1px solid #dadada;
}
#menu li ul li a:hover {
color: #0055a0
}
#menu li:hover ul, #menu li.sfhover ul {
display: block; /* classe "sfhover" lors de mouseover, voirJavaSscript */
width: 150px;
} |
La Javascript (pas important pour ma question)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script> |
Intéréssant, avec IE ça fonctionne parfaitement (comme avec Firefox) si j'enlève le DOCTYPE de mon fichier HTML. Sans DOCTYPE (donc avec un DOCTYPE par défaut) ça fonctionne bien comme sur Firefox.
Mon DOCTYPE actuel
Code:
1
2
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> |
Pour la démo en live (à tester avec IE, pas de différence avec Firefox)
sans DOCTYPE
avec DOCTYPE
Bien sûr, j'aimerais bien que mon fichier HTML ait son DOCTYPE déclaré...
Que faire à votre avis? Changer de DOCTYPE? Lequel mettre?
Sinon, que changer dan sle CSS?
Merci...
