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

这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习半铸钢钢性铸铁(铸造半钢)以及jquery的朋友有不小的帮助。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/

具体代码如下：

！DOCTYPE html html towneta charset=' UTF-8 ' title jquery下拉导航/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(')' .nav ').儿童(' li:has(ul)').悬停(function(){ $(this)).儿童(' ul ').向下滑动()；}，function(){ $(this).儿童(' ul ').hide()；} );});/script style type=' text/CSS ' * { margin 33600；划水：0;} .导航{ margin:200px列表样式-:型无；} .nav Li { position : relative float : left右边距：10 px} .导航li ul { display:none位置：绝对；top:20pxleft:0列表样式-:型无；} .nav Li ul Li { padd :2 px 0；}/style/head body ul class=' nav ' lia href=' # '首页/a /li阿利链接/a ul a href=' # ' AAA/a/Li a href=' # ' BBB/a/Li a href=' # ' CCC/a/Li a href=' # ' DDD/a/Li/ul/Li阿利href=' # '相册/a ul lia href=' # ' 11/a/Li lia href=' # ' 22/a/Li lia href=' # ' 33/a/Li lia href=' # ' 44/a/Li/ul/Li阿利href=' # '博客/a ul lia href='# AA/a/Li lia href=' # ' BB/a/Li lia href=' # ' CC/a/Li lia href=' # ' DD/a/Li/ul/Li阿利href=' # '关于/a/Li div style=' clear : both '/div/ul/body/html希望本文所述对大家的jquery程序设计有所帮助。