jQuery简单实现两级下拉菜单效果代码

本文实例讲述了jQuery简单实现两级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款两级下拉菜单，jquery插件版，在IE6/IE7/IE8下运行良好，在本示例中，菜单仅显示了四组，不过原理是一样的，菜单较长的话直接复制其中一组就行了，直到满足你的应用。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-simple-2l-滑出菜单-codes/

具体代码如下：

！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 '标题两级下拉菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式* { margin :0 pxpadding:0pxlist样式的： none}正文{ font-size :12 px}.nav { float : leftclear : both margin 3360100 pxdisplay : inline }。导航li { float:left位置：相对；}.导航阿利{显示：块；宽度：60 pxpadding:8px 0px 6px文本对齐：居中；color: # 000背景# ccc文本装饰：无；}.导航阿利：悬停{背景： # 666；color: # fff}。nav li ul {位置：绝对显示：none}。nav li ul li { float:none}。阿利航空公司{背景# eee }/style/head dyul id=' mainNav ' class=' nav ' lia href=' JavaScript : void(0)；'首页/a/lilia href=' JavaScript : void(0)；'导航菜单/aullia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'采购/a/Li/ul/lilia href=' JavaScript : void(0)；'企业采购/aullia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'企业评测/a/lilia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'企业报价/a/Li/ul/lilia href=' JavaScript : void(0)；'行情报价/aullia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'导航1/a/lilia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'导航2/a/lilia href=' JavaScript : void(0)；'onclick=' JavaScript : alert($(this).html())；'导航3/a/Li/ul/Li/ulscript语言=' JavaScript '类型=' text/JavaScript '！- $(文档)。ready(function(){ var Li=$(' # mainNav Li ')；//找到#主导航中子元素李；var ulli。每个（函数{//循环每一个李莉情商（一)。悬停(function(){ $(this)).查找(' ul ').show()；//找到里里面的保险商实验所元素设置为显示}，function(){ $(this).查找(' ul ').hide()；})}))})/////脚本/正文/html希望本文所述对大家的jQuery程序设计有所帮助。