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
<!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>
[# Menu]
<li>[# Sous menu 4.1 ]</li><li>[# Sous menu 4.2 ]
<!-- sous sous menu 3 -->
<li>[# Sous menu 4.2.1 ]</li><li>[# Sous menu 4.2.2 ]</li><li>[# Sous menu 4.2.3 ]</li><li>[# Sous menu 4.2.4 ]</li>
</li>
</html>
menu.js
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
#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;
}
Désolé pour la longueur du post, j'ajouterais que ce menu est aisément modifiable pour vos créations ;o)