Bonjour, [J'ai créé un sujet similaire, mais j'attends une réponse assez rapidement si possible]

J'ai un menu déroulant horizontal. Celui se met très bien en place avec du javascript et un "onmouseover" :

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';}
}

Le seul souci, c'est que quand j'enléve ma souris, le menu reste déroulé. Alors comment le faire disparaître ??


En gros, quel est la fonction java qui peut faire disparaître mon menu quand ma souris n'est plus dessus ??

tu utilise onmouseover pour afficher , utilise onmouseout pour masquer

Oui d'accord, mais j'ai bien un autre code sur même genre que dans mon premier message a entrer non ??

fonction masque(id)
{
var d = document.getElementById(id);
if (d) {d.style.display='none';}
}

J'ai appliqué ton code a mon cas en le transformant un peu pour avoir le même genre que le code précédent :

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';}
}

Voila le code pour montrer.

Puis j'ai refait le code pour cacher, en changeant "montre" par "masque" :

window.onload=masque;
function masque(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';}
}

Et ça ne marche pas ... Pourquoi ??

dans ton menu tu dois avoir des :
<element_html onmousover="montre(un_id);">

tu dois faire :
<element_html onmousover="montre(un_id);" onmouseover="masque(un_id);">

et à mon avis le window.onload ne sert à rien

Je te montre mes Javascript et mon menu parce qu là ça ne marche pas !!!!!

Mon header :
[...]

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

<script type="text/javascript">
<!--
window.onload=masque;
function masque(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>

Mon menu :

<dl>			
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:masque('smenu1');">Menu 1</dt>
	<dd id="smenu1">
		<ul>
			<li><a href="#">Sous-Menu 1.1</a></li>
			<li><a href="#">Sous-Menu 1.2</a></li>
			<li><a href="#">Sous-Menu 1.3</a></li>
			<li><a href="#">Sous-Menu 1.4</a></li>
			<li><a href="#">Sous-Menu 1.5</a></li>
			<li><a href="#">Sous-Menu 1.6</a></li>
		</ul>
	</dd>
</dl>

Essaye ca, les window.onload n'ont aucune utilité ici :

<script type="text/javascript">
<!--
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';}
}

function masque(id) {
  var d = document.getElementById(id);
  if (d) {d.style.display='none';}  // Faut mettre display = none pour masquer
}
//-->
</script>

<dl>
<!-- pas besoin de mettre "javascript:" pour ces évènements là (c'est forcément javascript -->
<dt onmouseover="montre('smenu1');" onmouseout="masque('smenu1');">Menu 1</dt>
	<dd id="smenu1">
		<ul>
			<li><a href="#">Sous-Menu 1.1</a></li>
			<li><a href="#">Sous-Menu 1.2</a></li>
			<li><a href="#">Sous-Menu 1.3</a></li>
			<li><a href="#">Sous-Menu 1.4</a></li>
			<li><a href="#">Sous-Menu 1.5</a></li>
			<li><a href="#">Sous-Menu 1.6</a></li>
		</ul>
	</dd>
</dt>  <!-- t'avais pas fermé le dt -->
</dl>

Alors, tout va bien c'est ce que je voulais ça se désaffiche ...
Mais deux problèmes sont apparus ...

Le premier c'est que quand je suis sur le titre "Menu 1", ça s'affiche, mais a partir du moment où je vais sur les liens du menu, ça disparaît.

Deuxième problème, quand je charge la page, mon menu se déroule et reste déroulé. il faut que j'aille sur un des titres pour que ça parte ...

Encore un peu de courage pour moi ... SVP !!

Pourquoi ne pas faire ça en CSS ?

Au départ c'est ce que je voulais faire, mais je n'ai rien trouvé de "potable" ... Si tu sais ou je peux trouver quelque chose de bien en CSS et compatible IE et Firefox, je suis tout à fait prés à changer tout ça !!!

dt dd{display: none}
dt:hover dd{display: block}

Essaye ça...

Non, je préfére garder mon JS, parce que j'ai d'autres hover dans mon CSS et ça me fait tout bugué !!
A moins que vous ne me touviez la solution miracles avec mon CSS et mes deux scripts de menu !! ...