Bonjour,
j'ai fait un menu déroulant vertical avec sous menu. J'accède au sous menus sans aucun problème sous Firefox, mais sous IE c'est aléatoire (parfois j'accède dessus, parfois le menu se ferme carrément).
Je ne vois pas où est mon erreur dans ma feuille de style
Quelqu'un pourrais m'aider ?
Merci par avance
voici la structure html du menu :
et voici le style associé :
Modifié par Bouille24 (30 Oct 2008 - 12:43)
j'ai fait un menu déroulant vertical avec sous menu. J'accède au sous menus sans aucun problème sous Firefox, mais sous IE c'est aléatoire (parfois j'accède dessus, parfois le menu se ferme carrément).
Je ne vois pas où est mon erreur dans ma feuille de style
Quelqu'un pourrais m'aider ?
Merci par avance
voici la structure html du menu :
<div id="menu">
<dl id="menu">
<dt onmouseover='javascript:montre();' onmouseover="javascript:montre1();"><a>Bijoux et Coiffures</a></dt>
<dt onmouseover='javascript:montre("smenu2");' onmouseover="javascript:montre1();"><a>Vêtements</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#" onmouseover="javascript:montre1();">Hommes</a></li>
<li><a href="#117" onmouseover="javascript:montre1();">Femmes</a></li>
</ul>
</dd>
<dt onmouseover='javascript:montre("smenu3");' onmouseover="javascript:montre1();"><a>Art de la table</a></dt>
<dd id="smenu3">
<ul>
<li> <a onmouseover='javascript:montre1("ssmenu1");'>Autour du thé et du café</a><div id="fleche"><img src="http://pilote.mydistribution.fr/import_deco/images/soumenu_fleche.jpg"></div></li>
<dd id="ssmenu1" onmouseover='javascript:montre1("ssmenu1");' onmouseout="javascript:montre1();">
<ul>
<li><a href="#81">Le Grès</a></li>
<li><a href="#82">La Porcelaine</a></li>
</ul>
</dd>
<li><a onmouseover='javascript:montre1("ssmenu3");'>Autour du repas</a><div id="fleche"><img src="http://pilote.mydistribution.fr/import_deco/images/soumenu_fleche.jpg"></div></li>
<dd id="ssmenu3" onmouseover='javascript:montre1("ssmenu3");' onmouseout="javascript:montre1();">
<ul>
<li><a href="#85">Vaisselle</a></li><li><a href="#87">Services de table</a></li>
</ul>
</dd>
<li><a href="#88" onmouseover="javascript:montre1();">Accessoires de table</a></li>
</ul>
</dd>
</div>
et voici le style associé :
div#menu
{
float:left;
width:200px;
background:url(../images/fond-menu-deroulant.jpg);
background-repeat:repeat-y;
background-position:left;
background-color:#FDB000;
padding-left:35px;
font-weight:normal;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dl#menu {
width: 200px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
dl#menu dt {
margin: 2px 0;
height: 33px;
line-height: 30px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
border-bottom:1px solid #fff;
text-decoration:none;
cursor:pointer;
text-indent:10px;
color:#fff;
font-weight:normal;
text-align:left;
}
dl#menu dd {
font-size:14px;
margin: 2px 0;
line-height: 20px;
color:#fff;
}
dl#menu li {
font-size:14px;
height: 34px;
line-height: 20px;
margin-left:11px;
cursor:pointer;
}
dl#menu ul{
padding-top:5px;
background-color:#FEDB8C;
}
/*#menu dd ul dd ul li{
height: 35px;
font-size:12px;
}*/
#menu dd ul dd{
position: absolute;
z-index: 100;
left: 225px;
margin-top: -43px;
!margin-top: -25px;
width: 15em;
padding-top:4px;
margin-left:9px;
display: block;
text-align:left;
}
#menu dd ul dd a{
font-size:12px;
color:#6E2A9A;
background-color:#FEEBBF;
}
#menu dd ul dd ul {
background-color:#FEEBBF;
height:auto;
}
dl#menu dd ul dd ul li {
/*height:25px;
*/display:block;
}
#menu dd ul dd a:hover{
font-weight:bold;
color:#6E2A9A;
background-color:#FEEBBF;
font-size:12px;
}
#menu dd{
color:black;
display: none;
}
dl#menu li a, dl#menu dt a {
text-decoration: none;
display: block;
border: 0 none;
height: 25px;
font-size:18px;
text-align:left;
font-weight:normal;
}
dl#menu li dt ul li a {
font-size:12px;
}
dl#menu li a:hover{
color:#84339C;
font-size:14px;
font-weight:normal;
text-align:left;
}
dl#menu li a{
color:#84339C;
font-size:14px;
font-weight:normal;
text-align:left;
}
#menu dt a{
color:#fff;
font-size:18px;
}
#menu dt a:hover{
color:#fff;
font-size:18px;
font-weight:normal;
}
Modifié par Bouille24 (30 Oct 2008 - 12:43)