本文展示了jquery实现的漂亮的两级下拉菜单代码。分享给大家参考。具体如下：

介绍了一个基于jquery的网站下拉菜单，黑黑的，很漂亮。这个菜单需要点击主菜单后面的小三角符号，拉出副菜单。它不是一些菜单，但是当鼠标移动到主菜单上时，它会滑过。至于哪一个，就看个人喜好了。

我们先来看看跑步效果：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-BG-2-level-down-show-menu-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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312'titlejQuery二级菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('ul.subnav ').父项()。追加(“跨度/跨度”)；$('ul.topnav li span ').单击(function() { $(this)).父项()。find('ul.subnav ').向下滑动("快速")。show()；$(这个)。父项()。悬停(function() { }，function(){ $(this).父项()。find('ul.subnav ').向上滑动("慢");});}).悬停(function() { $(this)).add CLaSS(' sub hover ')；}，function(){ $(this).移除CLaSS(“子悬停”)；});});/script style type=' text/CSS ' body { margin : 0；padd : 0；font: 10px普通Helvetica阿里亚尔，无衬线；背景： # DDD网址(图片/正文_ BG。gif)重复-x；}.容器{ width : 960 pxmargin : 0 auto相对位置：} # header { padding-top : 120 px；} #标题。免责声明{ color : # 999 padd : 100 px 0 7px 0 text-align :右侧；显示器：块；绝对位置：top : 0；右： 0；} #标题。免责声明a { color: # ccc} ul。topnav { list-style : none；padding: 0 20pxmargin : 0向左浮动：宽度： 920像素；背景： # 222;font-size : 1.2 em背景： URL(图片/topnav _ BG。gif)重复-x；}ul.topnav li {左侧浮动：保证金： 0；padding: 0 15px 0 0相对位置：}ul.topnav阿利{ padd : 10px 5pxcolor : # fffdisplay :块；文本装饰：无；向左浮动：} ul。topnav阿利：悬停{背景： URL(图片/topnav _ hover。gif)不重复的中央顶部；} ul。topnav Li span { width : 17px高度： 35px向左浮动：背景：网址(图片/subnav _ BTN。gif)无重复中心顶部；} ul。李跨度。副悬停{背景-位置：中央底部；光标：指针；} ul。Li ul。subnav {列表样式：无；绝对位置：左： 0；top: 35px背景技术： # 333;保证金： 0；padd : 0；显示器：无；向左浮动：宽度： 170像素；-moz-border-radius-左下角： 5px-moz-border-radius-右下角： 5px-web套件-边框-左下-半径： 5px-web套件-边框-底部-右侧-半径： 5pxborder: 1px固体# 111;} ul。顶级导航。subnav Li { margin : 0；padd : 0；边框-top: 1px实心# 252525;边框-底部： 1px实心# 444;clear:两者；宽度： 170像素；}html ul.topnav li ul.subnav阿利{左侧浮动：宽度： 145像素；背景： # 333 URL(图片/下拉_链接BG。gif)无重复10px中心；左填充left: 20px} html ul。顶级导航。subnav阿利：悬停{背景： # 222 URL(图片/下拉_链接BG。gif)无重复10px中心；} #标题img { margin : 20px 0 10px }/style/head dydiv class=' container ' div id=' header ' ul class=' topnav ' lia href=' # '网站首页/a/li阿利网页菜单/a ul class=' subnav ' lia href=' # ' ASP导航/a/li lia href='#'JSP导航/a/li lia href='#'ASP.net导航/a/li lia href='#'PHP导航/a/li /ul /li阿利网页特效/a ul class='subnav' lia href='# '层和菜单/a/li lia href='# '鼠标特效/a/li lia href='# '表单特效/a/li lia href='# '表格特效/a/li lia href='#'CSS特效/a/li lia href='#'jQuery特效/a/li /ul /li lia href='# '搜索引擎/a/li lia href='# '博客营销/a/li lia href='# '联系我们/a/li /ul /div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。