带手风琴的导航菜单

Question

I am trying to replicate what tibco.co.in has done with navigation for their Products menu. I have come up with following stuff.

HTML:

<li class="ASSOCIATION_MENU_HANDLER">
    <a href="javascript:void(0);">Hospital Menu</a> <!-- this is always visible-->

     <div class="ASSOCIATION_MENU"> <!-- this div shows up when I mouseover the menu-->
        <ul class="sub-options">
            <li class="submenu-level-1> <!-- level1-->
                <span>
                    <a href="javascript:void();">Apollo Hospital</a>
                </span>
                <ul>
                    <li class="submenu-level-2">
         <!-- level2-->  <span><a href="#">Accident Department</a></span>     
                    </li>
                   <!----Several Departments with li.submenu-level-2 ---------->
            </li>
            <!----Several Hospitals with li.submenu-level-1 ---------->
        </ul>
    </div>
</li>

SCRIPT:

//shut down all expanded hospitals
jQuery(".sub-options ul").slideUp();

//trigger for showing the menu
 $(".ASSOCIATION_MENU_HANDLER").hover(
    function(){$(this).find(".ASSOCIATION_MENU").slideToggle(400);},
    function(){$(this).find(".ASSOCIATION_MENU").hide();}
), function() {
    jQuery(".sub-options ul").slideUp();
};

//controll mouseover on each hospital item
$('.sub-options > li').mouseenter( function(event) {
      jQuery(".sub-options ul").stop(); //stops all the current animations
      var me = $(this).children('ul');
      var theLi;
      //remove 'active' class from other hospitals
      $('.sub-options li').not(this).each(function() {
          theLi = $(this);
          if(theLi.find("span > a").first().hasClass("active")) {
              theLi.find("span > a").first().removeClass("active");
          }
      });
      //shut down other hospitals
      $('.sub-options ul').not(me).slideUp("slow");

     //show up the current hospital's departments
      me.slideDown("slow");
     //add 'active' class to current hospitals
      $(this).find("span > a").first().addClass("active");

});

This is working properly when the mouse movement is very slow. For quicker users some problems are happening-

1. sometimes half of the departments of a hospital are showing up, half is gone.
2. when I mouseout, all the expanded Hospitals should shut down
3. Also if I do too many mouse movement over the hospitals , then only the last action should be executed ie the menu should not expand and collapse for ages.

Any help is appreciated. Here is jsfiddle version of my work

Answer 1

At first glance perhaps it's an issue with the placement of your .stop() function.

The code you've got is a little complex to go through so apologies for the lack of your styling, but I think this is close to what you want?

http://jsfiddle.net/fJ6x8/

The example I've used is taken from this post -> http://www.webdeveloper.com/forum/showthread.php?269859-DropDown-multilevel-menu-with-hover