28173 sujets

CSS et mise en forme, CSS3

Menu déroulant : problème sur IE

Bonjour

J'ai créé un menu déroulant horizontal en suivant les tutoriaux alsacreations. Sur Firefox, tout est parfait. Mon problème est que sur IE, les menus disparaissent trop vite, avant qu'on ait le temps de selectionner quoi que se soit dans le menu déroulant.

Voici le code html:

<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre('smenu1');" ><a href="premieres.php" title="premieres">CAHIERS PREMIERES</a>
	<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="influences.php">INFLUENCES</a></li>
				
					<li><a href="couleurs.php">COULEURS</a></li>
					
					<li><a href="matieres.php">MATIERES</a></li>
					
				</ul>

			</dd></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu2');"><a href="cahiersfemme.php" title="femmes">CAHIERS FEMME</a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="femme.php">TENDANCES FEMME</a></li>

					<li><a href="maille.php">MAILLE</a></li>
					<li><a href="intimite.php">INTIMITE</a></li>
					<li><a href="beach.php">BEACH</a></li>
					<li><a href="ultimes.php">ULTIMES</a></li>
					
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><a href="cahiershomme.php" title="hommes">CAHIERS HOMME</a></dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="homme.php">TENDANCES HOMME</a></li>
					<li><a href="beachmen.php">MEN'S BODY AND BEACH</a></li>
					
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><a href="cahiersenfant.php" title="enfants">CAHIERS ENFANT</a></dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>

					<li><a href="baby.php">BABY-LAYETTE</a></li>
					<li><a href="enfant.php">TENDANCES ENFANT</a></li>
					<li><a href="junior.php">JUNIOR</a></li>
					
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');"><a href="cahiersspecialises.php" title="specialises">CAHIERS SP&Eacute;CIALIS&Eacute;S</a></dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="sport.php">SPORT AND STREET</a></li>
					<li><a href="accessoires.php">ACCESSOIRES</a></li>
					<li><a href="musthave.php">MUST HAVE TISSUS</a></li>
				</ul>
			</dd>
	</dl>
	
</div>


</body>


et le code CSS:
body {
	
	font: 9px verdana, arial, sans-serif;
	
	}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 14em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #96797A;

}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
	text-align: left;
	background: #EAE3E3;
	text-indent: 9px;
	padding: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #9CCDDC;	
}
#menu li a, #menu dt a {
color: #342224;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #EAE3E3;
color: #EE1A11;
}



Et la page en ligne: http://www.promostyl.com/cahier/testmenu.php


Merci d'avance
Bonjour, j'ai le même problème. Dans mon cas, le menu est verticale.
J'ai l'impression que IE laisse une zone de vide autour de chaque case, donc quand on a un "onmouseout", IE referme le menu. C'est bizarre, il faut aller à toute vitesse pour passer d'une case a l'autre.
Il faudrai réussir à combler la zone vide, mais je ne vois pas comment ?

edit : je viens de revoir ce tuto http://css.alsacreations.com/modelesmenus/vd2.htm#
on voit bien que le sous-menu est au-dessus du menu, donc ça régle le problème pour ce cas.
Mais je reste embeté car mon menu est graphique, donc il ne faut pas que le sous-menu soit sur le menu ! Je vais continuer mes recherches.
Modifié par big-rep (06 Jan 2007 - 11:37)
Sujet clos
Aller à