18043 sujets

Questions générales et questions de débutants

[resolu] Fermeture trop rapide d'un menu déroulant

Bonjour à toutes et à tous,

Encore une fois, j'ai utilisé vos tutos pour créer un beau menu en CSS et javascript. Cependant, comme j'avais un menu particulier, à savoir: 5 éléments fixes sans sous menu, et 1 élément avec sous-menu; j'ai donc décidé de faire à ma sauce, et là bien sûr cela pose problème.

Tuto utilisé: Menu déroulant horizontal

Quand je survole ma div, le sous-menu s'ouvre, mais se referme au survol du sous-menu après la descente de quelques pixels (comme si la zone active ne couvrait pas l'intégralité du sous-menu).

Il faut noter que le problème est le même sous ie et firefox (même si firefox ne me met pas d'intervales entre les éléments du sous-menu, tandis que ie m'ajoute 2 ou 3 pixels entre chaque cellule).

Comme je ne suis pas sûr d'être clair et qu'un peu de code vaut mieux que trois mille explications, voici mon code CSS:

li {
text-align: center;
display: block;
margin: 0px;
padding: 0px;
font: bold 12px arial;
list-style-type: none;
width: 91px;
background-color: #FFFFFF;
}

li a {
	font-family: arial, helvetica, sans serif;
	text-decoration: none;
	display: block;
	height: auto;
	border: 0 none;
	color: #000;
	}
li a:hover {
	background: #1ACB00;
	color: #FFFFFF;
}
	dl {
float: left;
width: 91px;
height: auto;
margin: 0px;
padding: 0px;
}
dd, ul{
padding: 0px;
margin: 0px;
background-color:#009900;
width: 91px;
height: 300px;}


et le HTML et javascript:


<head><script type="text/javascript">
			<!--
			window.onload=montre;
			function montre(id) {
			var d = document.getElementById(id);
			for (var i = 1; i<=10; i++) {
			if (document.getElementById('smenu1')) {document.getElementById('smenu1').style.display='none';}
			}
			if (d) {d.style.display='block';}
			}
			//-->
			</script></head>

<body>...
<div id="menu">
<div id="m1"><a href="http://www.google.fr">Présentation</a></div>
//............
<div id="m6"><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="lien1.php">Lien 1</a></li>
					<li><a href="lien2.php">Lien 2</a></li>
					<li><a href="lien3.php">Lien 3</a></li>
					<li><a href="lien 4.php">Lien 4</a></li>
					<li><a href="lien5.php">Lien 5</a></li>
					<li><a href="lien6.php">Lien 6</a></li>
					<li><a href="lien7">Lien 7</a></li>
					<li><a href="lien8.php">Lien 8</a></li>
					<li><a href="lien9.php">Lien 9</a></li>
					<li><a href="lien10.php">Lien 10</a></li>
				</ul>
			</dd></dl>
		</div></div>
</body>


Merci d'avance pour tous les éléments, pistes que vous voudrez bien m'apporter pour que je résolve mon problème.

@+! Smiley smile
Modifié par Neomcdn (28 Aug 2007 - 09:04)
Sujet clos
Aller à