Bonjour,

j'ai un petit souci avec un menu déroulant vertical en javascript, mes sous menus restent toujours apparent.

Voici un extrait du code :

<div id="menuv">
<dl>
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">Menu</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="http://"> sous menu 1</a></li>
<li><a href="http://">sous menu 2</a></li>

</dd>
</dl>
<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('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</div>

et le CSS correspondant

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuv {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menuv dt {
cursor: pointer;
background: #FFA500;
color: #800000;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menuv dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #442C00;
color : #FFA500;
border: 1px solid gray;
}

#menuv ul {
padding: 2px;
}
#menuv li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menuv li a, #menuv dt a {
color: #FFA500;
display: block;
}

#menuv li a:hover {
	background-color: #FFC251;
	color : Black;
}

On m'avait conseillé de mettre onmouseover dans la balise dl ou div mais cela ne semble pas fonctionner.

Ps ceci est pour un blog, donc je ne suis pas "maitre" de tout mais pourtant mon menu déroulant horizontal tourne sans problème.

Merci

Modifié le 29 novembre 200519 a par freeze

En plus du "block" ou du "none" utilise la propriété display également :

montre :

document.getElementById(id).style.visibility= 'visible';

document.getElementById(id).style.display= 'block';

cache :

document.getElementById(id).style.visibility= 'hidden';

document.getElementById(id).style.display= 'none';

En plus du "block" ou du "none" utilise la propriété display également :

montre :

document.getElementById(id).style.visibility= 'visible';

document.getElementById(id).style.display= 'block';

cache :

document.getElementById(id).style.visibility= 'hidden';

document.getElementById(id).style.display= 'none';

euh merci Sygen de ta réponse mais je suis un naze en javascript.

je dois le placer où ton code ?

merci

Ben suffit de regarder un peu :

tu as :

if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

}

if (d) {d.style.display='block';}

}

ben tu ajoutes le visibility

...

if (document.getElementById('smenu'+i)) {

document.getElementById('smenu'+i).style.display='none';

document.getElementById('smenu'+i).style.visibility='hidden';

}

}

if (d) {

d.style.display='block';

d.style.visibility='visible';

}

}

pas sorcier...

Ben suffit de regarder un peu :

tu as :

if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

}

if (d) {d.style.display='block';}

}

ben tu ajoutes le visibility

...

if (document.getElementById('smenu'+i)) {

document.getElementById('smenu'+i).style.display='none';

document.getElementById('smenu'+i).style.visibility='hidden';

}

}

if (d) {

d.style.display='block';

d.style.visibility='visible';

}

}

pas sorcier...

Salut SyGen j'ai bien rajouté tes 2lignes visibility mais cela ne fonctionne toujours pas.

Peut etre est-ce du au CSS

Bon, j'ai finalement résolu mon problème en utilisant une structure de type :

<div id="menuv">
<ul class="menuv">
	<li>Menu 1
		<ul class="smenuv">
			<li><a href="#">Sous-menu 1.1</a></li>
			<li>Sous-menu 1.2</li>
		</ul>
	</li>
	<li>Menu 2
		<ul class="smenuv">
			<li><a href="#">Sous-menu 2.1</a></li>
			<li>Sous-menu 2.2</li>
		</ul>
	</li>
<ul>
</div>

avec un CSS adapté

et en rajoutant un javascript adapté pour IE

Vive Le CSS

Ps : j'ai pas trouvé l'otpion pour mettre résolu à ce sujet...

Modifié le 1 décembre 200519 a par freeze