Bonjour
J'ai un menu dynamique qui fonctionne bien sous Firefox et IE6 mais qui coince sous IE7.
Ce qui se passe :
* lorsqu'on passe le curseur sur l'image d'un menu de premier niveau, le menu de deuxième niveau correspondant se déroule bien
* quand on veut ensuite accéder à une ligne de ce menu de deuxième niveau, le menu se referme
Une page sur laquelle on rencontre le problème : http://papapetch.free.fr/fort_dernier/fr/accueil.html
Le code HTML :
Le code CSS :
Le code javascript :
Merci pour votre aide.
J'ai un menu dynamique qui fonctionne bien sous Firefox et IE6 mais qui coince sous IE7.
Ce qui se passe :
* lorsqu'on passe le curseur sur l'image d'un menu de premier niveau, le menu de deuxième niveau correspondant se déroule bien
* quand on veut ensuite accéder à une ligne de ce menu de deuxième niveau, le menu se referme
Une page sur laquelle on rencontre le problème : http://papapetch.free.fr/fort_dernier/fr/accueil.html
Le code HTML :
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<span class="menu_machines"></span>
</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="lcr600.html">LCR 600 Kawasaki</a></li>
<li><a href="mr600.html">MR 600 Suzuki</a></li>
<li><a href="panda.html">Panda 1100 Suzuki</a></li>
<li><a href="choda.html">Choda 1000 GSXR</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<span class="menu_historique"></span>
</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="2008_saison.html">2008</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<span class="menu_hommes"></span>
</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="gueranger.html">Christophe Gueranger</a></li>
<li><a href="hergott.html">Jean Louis Hergott</a></li>
<li><a href="isope.html">Dominique Isope</a></li>
<li><a href="moise.html">Laurent Moisé</a></li>
<li><a href="vincent.html">Patrice Vincent</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('');">
<span class="menu_accueil_actif"><a href="accueil.html"></a></span>
</dt>
</dl>
</div>
Le code CSS :
#menu {
position: absolute;
top: 124px;
right: 0px;
z-index: 100;
width: 763px;
}
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: right;
width: 109px;
}
#menu dt {
cursor: pointer;
}
#menu dt span, #menu dt a {
display: block;
width: 109px;
height: 22px;
}
.menu_accueil {
background: url(../images/btn_accueil_off.gif) no-repeat;
}
.menu_accueil_actif {
background: url(../images/btn_accueil_actif.gif) no-repeat;
}
.menu_accueil:hover, .menu_accueil:focus {
background: url(../images/btn_accueil_on.gif) no-repeat;
}
.menu_hommes {
background: url(../images/btn_hommes_off.gif) no-repeat;
}
.menu_hommes_actif {
background: url(../images/btn_hommes_actif.gif) no-repeat;
}
.menu_hommes:hover, .menu_hommes:focus, .menu_hommes_actif:hover, .menu_hommes_actif:focus {
background: url(../images/btn_hommes_on.gif) no-repeat;
}
.menu_historique {
background: url(../images/btn_historique_off.gif) no-repeat;
}
.menu_historique_actif {
background: url(../images/btn_historique_actif.gif) no-repeat;
}
.menu_historique:hover, .menu_historique:focus, .menu_historique_actif:hover, .menu_historique_actif:focus {
background: url(../images/btn_historique_on.gif) no-repeat;
}
.menu_machines {
background: url(../images/btn_machines_off.gif) no-repeat;
}
.menu_machines_actif {
background: url(../images/btn_machines_actif.gif) no-repeat;
}
.menu_machines:hover, .menu_machines:focus, .menu_machines_actif:hover, .menu_machines_actif:focus {
background: url(../images/btn_machines_on.gif) no-repeat;
}
Le code javascript :
// Menu principal déroulant
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
Merci pour votre aide.