Menu deroulant, cliquable ?

Bonjour,

Voila, j'ai un probleme avec un menu deroulant.
C'est un menu que j'ai récuperer je ne sais plus ou, quand on passe la souris sur les categories du menu, les sous categories se déplient. Avec peu de sous catégories, se menu est pas mal, mais malheureusement, avec beaucoup, cela deviens impossible d'acceder à certaines catégories.

Je voudrais que l'on clique d'abord sur une categorie pour que ca se déplie.

Je ne connais pas du tout le javascript, c'est pour cela que je demande votre aide.

Voici le code (sans le debut, qui sert a remplir les tableaux des liens et textes) :

[code]
function montreMenu(num){
 for (var i=0; i<nbMenu; i++) {
  if (ie) {
   objet = document.all["ssmenu"+i]
  } else if (ns6) {
   objet = document.getElementById("ssmenu"+i);
  }
  if (objet.style.display == ""){
   objet.style.display = "none"
  }
 }
 if (ie) {
  objet = document.all["ssmenu"+num]
 } else if (ns6) {
  objet = document.getElementById("ssmenu"+num);
 }
 if (objet.style.display == "none"){
  objet.style.display = "" 
 }
}

function rollOver(lien) {
 lien.style.background = couleurFondRollOver;
 lien.style.color = couleurLienRollOver;
}

function rollOut(lien) {
 lien.style.background = couleurFond2;
 lien.style.color = couleurPoliceMenu;
}

function ouvreLien(url,mode) {
 if (mode == "_blank") {
  window.open(url)
 } else if (mode == "_top")  {
  window.top.location.href = url
 } else {
  window.top.parent.frames[mode].location.href  = url
 }
}

//------------------- Génération du menu  ------------------------//

function generation () {
 document.write("<style type='text/css'>");
 document.write("td.menu {");
 document.write(" font-family: "+policeMenu+";");
 document.write(" font-size: "+taillePoliceMenu+"px;");
 document.write(" color: "+couleurPoliceMenu+";");
 document.write(" border: 1px solid "+couleurBordure+";");
 document.write(" background-color: "+couleurFond+";");
 document.write("}");

 document.write("table.ssmenu {");
 document.write(" font-family: "+policeMenu+";");
 document.write(" font-size: "+taillePoliceMenu+"px;");
 document.write(" color: "+couleurPoliceMenu+";");
 document.write(" border: 1px solid "+couleurBordure+";");
 document.write(" background-color: "+couleurFond2+";");
 document.write("}");
 document.write("</style>");
 
 document.write("<table width='"+largeurMenu+"' border='0' cellspacing='0' cellpadding='0'>");
 //1ere boucle
 for (i=0; i<nbMenu; i++) {
  document.write("<tr>");
  document.write("<td onMouseOver='montreMenu("+i+")' style='cursor:hand' class='menu'>"+menu[i]+"</td>");
  document.write("</tr>");
  document.write("<tr style='display:none' id='ssmenu"+i+"'>");
  document.write("<td>");
   //<!--Un espace-->
  document.write("<table width='"+largeurMenu+"' border='0' cellspacing='0' cellpadding='0'>");
  document.write("<tr>");
  document.write("<td width='2'></td>");
  document.write("</tr>");
  document.write("</table>");
  //<!--Le sous menu-->
  document.write("<table width='"+largeurMenu+"' border='0' cellspacing='0' cellpadding='0' class='ssmenu'>");
     // seconde boucle
  for (z=0; z<ssmenuNom[i].length; z++) {
   document.write("<tr>");
   document.write("<td onMouseOver='rollOver(this)' onMouseOut='rollOut(this)' onClick='ouvreLien(\""+ssmenuLien[i][z]+"\",\""+ssmenuTarget[i][z]+"\")' style='cursor:hand'>"+ssmenuNom[i][z]+"</td>");
   document.write("</tr>");
      //fin seconde boucle
  }
  document.write("</table>");
  document.write("</td>");
  document.write("</tr>");
  document.write("<tr>");
  document.write("<td width='2'></td>");
  document.write("</tr>");
  // fin 1 ere boucle
  }
 document.write("</table>");
 }
[/code]


Dans l'attente d'une réponse, je vous remercie d'avance.