[IE6] Menu déroulant disparaissant
Bonjour à tous,
J'ai un problème concernant mes menus déroulants sous Internet Explorer (ils marchent très bien sous Firefox).
Au passage de la souris sur une catégorie, tout se déroule bien, mais pour selectionner un sous-menu, c'est là que ca coince.
Certains sous-menus s'affichent bien, d'autres disparaissent quand je tente de me positionner dessus.
Mon menu est composé de XHTML / CSS / Javascript, mais je pense que le problème vient du CSS.
Menu HTML :
Et voici ma mise en forme CSS :<script type="text/javascript">
window.onload=montre;
//affichage menu déroulant et placement
function montre(id,affiche)
{
var d = document.getElementById(id);
//si on quitte élément du menu
if (d && !affiche)
{
d.style.display='none'; //on efface
var c=d.parentNode; //parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si un sous-menu, on rend les couleurs d'origine
{
c.firstChild.style.color='#39f';
c.firstChild.style.background='#fff';
}
}
//sinon si élément du menu
else if (d && affiche)
{
d.style.display='block'; //affichage
var c=d.parentNode; //parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si sous-menu, on redonne les couleurs de survol
{
c.firstChild.style.color='#fff';
c.firstChild.style.background='#39f';
}
}
}
</script>
</head>
<body>
<div id="entete">
<div id="menu">
<ul>
<li onmouseover="montre('Choix5',true);" onmouseout="montre('Choix5',false);"><a href="#"><img src="images/img1.gif" alt="menu1"></a>
<ul id="Choix5">
<li onmouseover="montre('Ligne1.5',true);" onmouseout="montre('Ligne1.5',false);"><a href="#">Ligne1</a>
<ul class="dernier" id="Ligne1.5">
<li><a href="#">Sous-menu1</a></li>
<li><a href="#">Sous-menu2</a></li>
<li><a href="#">Sous-menu3</a></li>
</ul>
</li>
</ul>
</li>
<!--Fin choix1-->
</ul>
</div>
<!--Fin menu vertical-->
</div>
<!-- Fin entete -->
J'ai essayé de faire une page sans javascript, le problème de disparition des menus persiste.body {
font-family:Verdana, "Times New Roman", Helvetica, sans-serif;
font-size: 1.0em;
color:#000000;
margin:0px; padding:0px;
background-image:url(images/image3.jpg); background-repeat:no-repeat;
behavior: url(csshover.htc);
}
a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}#entete{
margin: 0;
padding: 17px 10px;
width: 98.4%;
text-align:center;
height:60px;
background-image:url(images/vert2.jpg);
position:fixed;
z-index:1;
}/* Menus déroulants */
ul, li {
list-style-type:none;
}
/*Sous-menus*/
#menu {
margin-top:15px;
/margin-top:55px;
position:absolute;
/margin-left:-610px;
margin-right:0px;
float:left;
}
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
height:22px;
padding:0px;
}
#menu ul li a:hover{
color:#F33;
}
#menu ul li ul {
display:none;
position:absolute;
width:84px;
/width:100px;
border:1px solid #dddddd;
border-top:none;
top:20px;
/left:-40px;
background-color:#FFFFFF;
}
#menu ul li ul li {
height:100%;
}
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:25px;
border-top:1px solid #dddddd;
}
/*Décalage droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
/left:70px;
}
Répondre avec citation
Partager