Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)

介绍一个下拉菜单插件，名为Sexy Drop Down Menu。
不过由于此下拉菜单是在每个一级菜单的<li></li>之间插入了一个<span></span>，然后插入一个向下的箭头，点击箭头之后显示菜单。

如下图：

 
jquery 下拉菜单插件的演示地址：www.sohtanaka.com/web-design/examples/drop-down-menu/。

不过，很多时候，需要在鼠标滑过一级菜单的时候就显示他的二级菜单，因此要进行下改造。

将JS代码改为如下内容即可：

$(document).ready(function(){   
    $("ul.topnav li").hover(function() {        
        $(this).find("ul.subnav").slideDown('fast').show(); 
        $(this).addClass("subhover");
 
    },function(){
        $(this).find("ul.subnav").slideUp('slow');
        $(this).removeClass("subhover");
        
    });
 
});

修改完之后浏览效果，发现一个问题，就是鼠标不停的在两个下拉菜单之间移动，鼠标在两个下拉菜单之间不停的来回移动，当停止移动鼠标时，两个下拉菜单不停的上下移动。

利用JQuery提供的stop()方法，可以轻松解决这个问题，修改后的代码如下：

$(document).ready(function(){
     $("ul.topnav li").hover(function() {       
          $(".subnav").stop(false,true);
          $(this).find("ul.subnav").slideDown('fast').show(); 
          $(this).addClass("subhover");
     },function(){
          $(this).find("ul.subnav").slideUp('slow');
          $(this).removeClass("subhover");      
     });
});