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
