IE et Firefox: Frères ennemis pour un menu déroulant
Posté : 24 août 2007, 17:10
Bonjour à tous,
Je vous soumets un de mes problèmes pour savoir si quelqu'un y a déjà été confronté. Le SAV de Alsacréations semble en vacances...
!
Je viens de créer un menu déroulant en HTML, javascript et CSS, à partir des tutos de Alsacréations, et j'ai un problème de fermeture intempestive de mon sous-menu avec Firefox, tandisqu'il n'ya pas de problème avec IE.
J'ai une div menu, dans laquelle, on a 6 entités, dont une a des sous-entités. Au passage de la souris sur l'entité, les sous-entités s'affichent.
- Au survol de ces entités sous IE, pas de problème (si ce n'est que le display: block semble ne pas fonctionner, car le survol n'est pas actif en dehors du texte de l'entité: un passage sur le fond d'une sous-entité, fait se refermer les sous-entités)
- Au survol de la 3ème entité sous FF, le navigateur quitte les sous-entités: les 7 autres liens ne sont donc pas accessibles.
Voici le code CSS
et le code HTML et js:
Merci d'avoir parcouru ce long message! En espérant que quelqu'un puisse me donner une piste pour effectuer les modifications nécessaires, car mes recherches et surtout mes tests sur le code n'ont servi à rien.
Cordialement,
Neomcdn
Je vous soumets un de mes problèmes pour savoir si quelqu'un y a déjà été confronté. Le SAV de Alsacréations semble en vacances...
!Je viens de créer un menu déroulant en HTML, javascript et CSS, à partir des tutos de Alsacréations, et j'ai un problème de fermeture intempestive de mon sous-menu avec Firefox, tandisqu'il n'ya pas de problème avec IE.
J'ai une div menu, dans laquelle, on a 6 entités, dont une a des sous-entités. Au passage de la souris sur l'entité, les sous-entités s'affichent.
- Au survol de ces entités sous IE, pas de problème (si ce n'est que le display: block semble ne pas fonctionner, car le survol n'est pas actif en dehors du texte de l'entité: un passage sur le fond d'une sous-entité, fait se refermer les sous-entités)
- Au survol de la 3ème entité sous FF, le navigateur quitte les sous-entités: les 7 autres liens ne sont donc pas accessibles.
Voici le code CSS
Code : Tout sélectionner
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
font: bold 11px arial;
list-style-type: none;
}
#menu {
position: absolute;
margin: 1px 0 0 801px;
width: 192px;
}
#menu dl {
float: left;
width: 93px;
margin: 0;
}
#menu dt {
cursor: pointer;
height: 24px;
text-align: center;
background: #33FF00;
margin: 0;
line-height : 24px;
display: block;
}
#menu dd {
border: 1px solid gray;
margin: 0;
background: #000099;
}
#menu li {
text-align: center;
display:block;
}
#menu dt a {
font-family: arial, helvetica, sans serif;
text-decoration: none;
height: 100%;
border: 0 none;
display: block;
color: #FFFFFF;
}
#menu li a {
background: #CCFF33;
font-family: arial, helvetica, sans serif;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
color: #000;
}
#menu li a:hover {
background: #1ACB00;
color: #FFFFFF;
}
#menu dt :hover {
background: #FFFF99;
padding: 0;
margin: 0;
}Code : Tout sélectionner
<div id="menu"><dl>
<dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Présentation">Présentation</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Promotions">Promotions</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Catalogues">Catalogues</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Liens">Liens</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="http://www.google.fr">Contacts</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="#" title="Les produits et services de l'armurerie Audureau">Produits</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="armes-a-feu.php">Armes à feu</a></li>
<li><a href="cartouches-balles.php">Cartouches et balles</a></li>
<li><a href="armes-blanches.php">Armes blanches</a></li>
<li><a href="archerie.php">Archerie</a></li>
<li><a href="loisirs.php">Loisirs</a></li>
<li><a href="vetements-accessoires.php">Vêtements et accessoires</a></li>
<li><a href="reparation-renovation.php">Réparation et rénovation</a></li>
<li><a href="securite.php">Sécurité</a></li>
<li><a href="detecteurs.php">Détecteurs</a></li>
<li><a href="trophees-cadeaux.php">Trophées et cadeaux</a></li>
</ul>
</dd></dl>
</div>Cordialement,
Neomcdn
