Hi all,


I'm trying to create a cascade menu in javascript,
and I'm working on a simple example.

I wrote the following <UL> list :

 <ul id="menu" >
 <li id="liaccueil">Accueil</li>
 <li id="liarticles"> Articles
     <ul id="luarticles">
     <li id="licss">CSS</li>
     <li id="lijavascript">JavaScript</li>
     <li id="liphp">PHP</li>
     </ul>
 </li>
 <li id="litelechargement"> Téléchargement
     <ul id="lutele">
     <li id="lilogiciels">Logiciels</li>
     <li id="limusique">Musique</li>
     <li id="lifilms">Films</li>
     </ul>
 </li>
 <li id="licontact"> contact
     <ul id="ulcontact">
     <li id="lijeremie"> Jeremie
         <ul id="uljeremie"> <li id="limail">Mail</li>
         <li id="liwebjere">Site Web</li>
         </ul>
     </li>
     <li id="livirginie"> Virginie
         <ul id="ulvirginie">
         <li id="limailvir">Mail</li>
         <li id="liwebvir">Site Web</li>
         </ul>
     </li>
     <li id="liagathe"> Agathe
         <ul id="ulagathe">
         <li id="limailaga">Mail</li>
         <li id="liwebaga">Site Web</li>
         </ul>
     </li>
     </ul>
</li>
</ul>

For event handlers :

function hover(evt){
    var target;
    var event = evt || window.event;

    if(event.target) target = event.target;
    else target = event.srcElement;

    var currentTarget = event.currentTarget ? event.currentTarget.tagName : 'tag unknown';
    var currentTargetId = event.currentTarget ? event.currentTarget.id : 'id unknown';

    log('log',' ['+ event.type +'] [target] '+ target.tagName + ' id=' + target.id +
    ' [curTarget] '+currentTarget + ' id=' + currentTargetId);

    var obj = target;
   UL = obj.getElementsByTagName('ul');
   if(UL.length > 0){
        sousMenu = UL[0].style;
         if(sousMenu .display == 'none' || sousMenu.display == ''){
            sousMenu.display = 'block';
        logln('log','display sub menu');
        }
         else{
            sousMenu.display = 'none';
        logln('log','hide sub menu');
         }
    }
 }
 function setHover(){
          LI = document.getElementById('menu').getElementsByTagNa me('li');
          nLI = LI.length;
          for(i=0; i < nLI; i++){
              LI[ i ].onmouseover = hover;
              LI[ i ].onmouseout = hover;
         }
}


This method does not work; When the mouse goes over the menu, the correspondong sub menu
is well displayed; But when the mouse goes over the sub menu, this latter disappears.
Here is the logs which show the events that occured :

-> following event generated when the mouse goes over the main menu
[mouseover] [target] LI id=licontact [curTarget] LI id=licontact >affiche sous menu
-> following events generated when the mouse moves to the sub menu
[mouseout] [target] LI id=licontact [curTarget] LI id=licontact >cache sous menu
[mouseover] [target] UL id=ulcontact [curTarget] LI id=licontact >affiche sous menu
[mouseout] [target] UL id=ulcontact [curTarget] LI id=licontact >cache sous menu

The same result occurs for Firefox 2 ou IE 6/7.
It looks like as if the mouseover on the LI element of the sub menu is not generated.

Then I tried a second solution, and I assigned the handler in a different way :

  function setHover(){
          LI = document.getElementById('menu').getElementsByTagNa me('li');

          nLI = LI.length;
          for(i=0; i < nLI; i++){
              LI[ i ].onmouseover = function(){ hover(this,'over'); }
              LI[ i ].onmouseout = function(){ hover(this,'out'); }
          }
      }

This works now. Here the logs :

-> following event generated when the mouse goes over the main menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
-> following events generated when the mouse moves to the sub menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=lijeremie [curTarget] tag unknown id=id unknown affiche sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu

The event flow changed, and the only difference is the way to assign the handlers!
This time, the mouseover is well generated for the sub menu LI element.

The inconvenient of this method is that I didn't have access to the event (except for IE)

Do you have any idea of what happens here ?
thanks