本文介绍一个下拉菜单，这个下拉菜单插件，是由国外的高手制作，名为Sexy Drop Down Menu ，搜索引擎上一搜一大把源码可以下载，但是由于这个下拉菜单是在每个一级菜单的<li></li>之间插入了一个<span></span>，然后插入一个向下的箭头，点击箭头之后显示菜单。如图:

这里给出DEMO地址：，但是由于很多情况下，我们需要在鼠标滑过一级菜单的时候就显示他的二级菜单，所以要进行下改造。很简单，将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()方法，用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"); }); });

现在再浏览，毫无问题。。