28172 sujets

CSS et mise en forme, CSS3

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 Smiley confus

Quelqu'un pourrais m'aider ? Smiley confused

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)
Grace à CSS viewer je me suis rendu compte que le lien de mon sous menu n'avait pas la même hauteur que le LI... donc créait un espace vide qui perturbait IE Smiley langue
En passant le style A à la même hauteur ça fonctionne maintenant.