Menu en cascade css/javascript Bug IE6
Bonjour à tous,
J'ai un problème épineux a vous soumettre, un bug d'affichage avec IE6.
J'explique en deux mots : un menu en cascade de deux sous menu, lors du survol d'un lien dans le premeier sous menu, un second s'ouvre.
Cela fonctionne très bien et s'affiche clairement dans IE7 et Firefox, seulement dans IE6 je me retrouve avec un espace sous le lien vers le sous-sous menu et je n'arrive vraiment pas a m'en débarasser. Je joint mon code pour ceux qui voudraient s'amuser de ce casse tête chinois :
menu.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<!--Gestion du menu haut-->
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul id="navigationprincipale">
<a href="#" title="Ouvrir les sous-menus de la rubrique" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">Menu</a>
<div id="smenu4" class="smenu" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"><ul><li><a href="#" onMouseOver="javascript:show();">Sous menu 4.1 </a></li><li><a href="#" title="Ouvrir les sous-menus de la sous-rubrique" onMouseOver="javascript:show('ssmenu3');" class="ssmenu" >Sous menu 4.2 </a>
<!-- sous sous menu 3 -->
<div id="ssmenu3" class="ssmenu" onMouseOver="javascript:show('ssmenu3');" onMouseOut="javascript:show();">
<ul><li><a href="#">Sous menu 4.2.1 </a></li><li><a href="#">Sous menu 4.2.2 </a></li><li><a href="#">Sous menu 4.2.3 </a></li><li><a href="#">Sous menu 4.2.4 </a></li></ul>
</div>
</li></ul></div></ul></div>
</body>
</html> |
menu.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=7; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=7; i++) {
if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
} |
et enfin la feuille de style, menu.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
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
|
#navigationprincipale, #navigationprincipale li {
margin:0;
padding:0;
list-style:none;
}
#navigationprincipale li {float:left;}
#navigationprincipale a {display: block; cursor: pointer; font-size:11px; letter-spacing:0px; font-weight:bold; color:black; text-decoration:none;}
* html #navigationprincipale li {
width: 1%;
overflow: visible;
}
*:first-child+html #navigationprincipale li {
overflow: visible;
}
div.smenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
}
div.smenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% !important;
display:block !important;
}
div.smenu ul li {
float:none !important;
display:block !important;
margin:0;
padding:0;
width:100% !important;
font-size:10px !important;
font-weight:normal !important;
}
div.smenu li a {
margin:0;
font-size:10px !important;
font-weight:normal !important;
display:block !important;
margin-top:0px;
padding:5px !important;
/*background:none !important;*/
color:#026094 !important;
text-decoration:none;
text-align:left !important;
}
div.smenu li a:hover {
background:#D9EAF4 !important;
color:#000 !important;
}
/* sous-sous menu */
div.ssmenu {
margin:-23px 0 0 0;
padding:0 ;
display:none;
position:absolute;
left:191px;
/*top:4px;*/
z-index:1000;
width:190px;
}
div.ssmenu ul {
margin:0 ;
padding:0;
list-style:none;
border:1px solid #4998D0;
background:#fff;
} |
Ce menu est aisément modifiable et peut servir de base a vos créations ;o)
