je suis un néophyte en javascript et j'ai problème sur lequel je me casse les dents depuis ce matin : j'avais un menu déroulant à 1 seul niveau (qui marche nickel) que j'essaie de transformer en menu à 2 niveaux (cf photo1).

J'arrive à afficher le 2° niveau (comme sur la photo1) mais le problème vient lorsque je change de menu de niveau 1 : les menus de niveau 2 "s'empilent" (cf photo2), je n'arrives pas à les effacer.

Le code HTML suivant correspond seulement au menu Information
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul><!--niveau 0-->
<li onmouseover="montre('smenu5');" onmouseout="montre();"><img src="info.gif" alt="Informations" />
  <ul id="smenu5"><!--niveau 1-->
    <li onmouseover="montre('smenu51');" onmouseout="montre();"><a href="#">Actualités</a>
      <ul id="smenu51"><!--niveau 2-->
        <li><a href="#">sous-menus1</a></li>
        ...
      </ul>
    </li>
    <li onmouseover="montre('smenu52');" onmouseout="montre();"><a href="#">Groupe d'experts IS</a>
      <ul id="smenu52"><!--niveau 2-->
        <li><a href="#">sous-menus2</a></li>
        ...
      </ul>
    </li>
...
Code JAVASCRIPT : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id)
{
  var d = document.getElementById(id);
  //pour chaque rubrique
  for (var i = 1; i<=5; i++)
  {
    //si la souris ne pointe pas dessus, on n'affiche pas la liste déroulante de sous-menu
    if (document.getElementById('smenu'+i)) 
    {
      document.getElementById('smenu'+i).style.display='none';
    }
  }
 
  if (d)
  {
    d.style.display = 'block';
  }
}
Je me bats avec les noeuds et compagnie mais je ne m'en sort pas.
Toutes les suggestions sont les bienvenues.

Merci d'avance pour votre aide.