Forum d'entraide PHPFrance

Bonjour à tous,

J'ai créé un menu pour mon site selon l'exemple ci-dessous.

<script type="text/javascript" language="javascript">
	function disply(d){
	    //fermer tous
		switch(d)
		{
		case 'index' :    document.getElementById('mod_ges').style.display = "none";
							document.getElementById('trans').style.display = "none";
		  				   document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'mod_ges' : 
		  document.getElementById('index').style.display = "none";
		 
		  				   document.getElementById('trans').style.display = "none";
		  				   document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'trans'    :document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		  					document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break; 
		  case 'titi'    : document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		  			      document.getElementById('trans').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break; 
		  case 'analyse'   :document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		                   document.getElementById('trans').style.display = "none";
						   document.getElementById('titi').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'quitter' : document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
						   document.getElementById('trans').style.display = "none";
						   document.getElementById('titi').style.display = "none";
						   document.getElementById('analyse').style.display = "none";
						   break;
		}
		
		//*****************
		var aff = document.getElementById(d);
	    //aff.style.display = "";
		if(aff.style.display == ""){
		  aff.style.display = "none";
		}
		else{
		  aff.style.display = "";
		}
	}
</script>
<hr width="170" color="#FFFFFF" size="1" /><br />
<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('index');"/><br />
<div class="sous_menu" id="index" style=" display;" >
<img src="./imgs/arrow.gif"> <a href="index.php" class="mm3">Acceuil</a><br />

</div>

<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('mod_ges');"/><br />
<div class="sous_menu" id="mod_ges" style=" display: ;" >
<img src="./imgs/arrow.gif" ><a href="formation.php" class="mm3">Formation</a><br />
<img src="./imgs/arrow.gif"> <a href="niveau1.php">Niveau 1</a><br />
<img src="./imgs/arrow.gif"> <a href="niveau2.php">Niveau 2</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Examens</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Cours Théorique</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Perfectionnement</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Tarifs</a>
</div>

<img src="./imgs/biplace.jpg" class="img_menu"  onclick="disply('trans');" /><br />
<div class="sous_menu" id="trans" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Biplace</a><br />

</div>

<img src="./imgs/information.jpg" class="img_menu"  onclick="disply('titi');" /><br />
<div class="sous_menu" id="titi" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Matériel</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Occasions</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Renseignements</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Nous trouver</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Idée Cadeaux</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Météo</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Contact</a><br />
</div>

<img src="./imgs/galerie.jpg" class="img_menu"  onclick="disply('analyse');" /><br />
<div class="sous_menu" id="analyse" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Galerie 1</a> <br />

</div>

<img src="./imgs/liens.jpg" class="img_menu"  onclick="disply('quitter');" /><br />
<div class="sous_menu" id="quitter" style=" display:none;">
<img src="imgs/arrow.gif"> <a href="#">Liens Météo</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Fabriquants</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Clubs</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Divers</a><br />
</div>
<br /><hr width="170" color="#FFFFFF" size="1" /><br />
  <script type="text/javascript">disply('index');</script>

Mon problème c'est quand j'affiche le menu 2 et que je clique sur un sous menu, la page s'affiche mais ferme le sous menu.

Comme faire pour que quand je clique sur le sous menu il affiche la page et que le sous menu reste ouvert?

Merci pour votre aide.

Salut,
c'est quoi "menu 2", "sous menu" ?
un exemple en ligne ?