本文实例讲述了jQuery实现带延迟的二级标签切换下拉列表效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现带延时效果的下拉列表菜单，有动画效果。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-延迟-显示-菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title二级标签切换/title style type=' text/CSS ' * { margin :0；划水：0;} body { padd :10 px } # div 1 { background : # 333高度：30 px宽度宽度：400 pxmargin :0 0 10px 0 } # div 1 Li {宽度： 100pxfloat:left线高：30 px背景技术：333;margin:0 5pxlist风格：无；文本对齐：中心；} #div1阿利{ color: # fff文本装饰：无；font-size :12 px显示：块；} # div阿利：悬停{文本装饰：下划线；} # div 1 Li span { display : none }/style脚本类型=' text/JAVAScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本/头体div id=' div 1 ' ul id=' nav '阿利a spana href=' # ' 111/a/a/span/Li阿利a spana href=' # ' 222/a/span/Li阿利href=' # ' menu 3/a spanaredy(function(){ $(' ul # nav Li ')).悬停（函数(){//悬停在列表项$(这个)上的事件上)。查找(' span ').表演(200)。css({ 'background' : '#1376c9 '，' display ' : ' block ' })；//显示subnav }、function() { //on悬停在外.$(这个)。查找(' span ').隐藏(200);//隐藏子av })；});/script/html希望本文所述对大家的jquery程序设计有所帮助。