本文通过一个实例说明jquery可以实现平滑的两级下拉菜单效果。分享给大家参考。具体如下：

这是jQuery实现的二级菜单效果。如果你不喜欢灰色的款式和颜色，那就自己动手吧。CSS代码已经过优化。如果水平高，可以自己修改。这是在国外前端设计网站上发现的导航菜单效果。希望你喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-soft-2 level-menu-nav-codes/

具体代码如下：

！DOCTYPE htmlheadtitlejquery平滑二级下拉菜单/titlestyleh1、h2、h3、h4、p、li、阿利；font-size : 15px字体粗细：粗体；颜色： # 525252文本装饰：无；}h1、h2、h3、H4；} # down _ nav { width : 960 px；padding: 0pxdisplay:内联块；列表样式：无；蚊子盒子阴影：插图0px 0px 1px # fff-web kit-box-shadow :插图0px 0px 1px # fffborder: 1px固体# CCC-moz-border-radius : 5px；-web套件-边框-半径： 5px背景技术： # e2e 2；背景技术：-moz-线性梯度(# f3f3f3、# e2e 2)；背景：-网络套件-渐变(线性，0 0,0 100%,从(# f3f3f3)到(# e2e 2))；} #下拉_ nav Li { padd : 10px 0px 10px 0px；向左浮动：相对位置：显示器：内联块；} #下拉菜单_导航阿利{ padd : 10px 15px 10px 15 xtext-shadow :-1px 1px 0px # f6f 6；蚊子盒子阴影：插图0px 0px 1px # fff-web kit-box-shadow :插图0px 0px 1px # fffborder-right : 1px实心# ccc}#dropdown_nav li a:悬停{背景： # F9 F9 F9 f 9；背景技术：-moz-线性梯度(#f9f9f9，E8 E8 E8)；背景：-网络套件-渐变（线性，0 0,0 100%,从(# F9 F9 F9 f 9)到(# e8e 8 e 8))；} #下拉_ nav阿利：活动{背景： # e2e 2；背景：-moz-线性-梯度(# e2e 2，# F3)；背景：-网络套件-渐变（线性，0 0,0 100%,从(# e2e2e2)到(# F3 F3))；} #下拉导航阿利。第一个{-moz-border-radius : 5px 0px 0px 5px；-web套件-边框-半径： 5px 0px 0px 5px}#dropdown_nav .sub _ nav { width : 160 pxpadding : 0 px绝对位置：top : 38pxleft : 0pxborder : 1px固体# ccc背景技术： # e2e 2；}#dropdown_nav .Li { width : 160 pxpadding : 0px } # drop down _ nav .阿利区块；边框-底部： 1px实心# ccc背景技术：-moz-线性梯度(# f3f3f3、# e2e 2)；背景：-网络套件-渐变(线性，0 0,0 100%,从(# f3f3f3)到(# e2e 2))；}#dropdown_nav .li a:副导航悬停{背景： # F9 F9 F9 f 9；背景技术：-moz-线性梯度(#f9f9f9，E8 E8 E8)；背景：-网络套件-渐变（线性，0 0,0 100%,从(# F9 F9 F9 f 9)到(# e8e 8 e 8))；}#dropdown_nav .li a:副导航活动{背景： # e2e 2；背景：-moz-线性-梯度(# e2e 2，# F3)；背景：-网络套件-渐变（线性，0 0,0 100%,从(# e2e2e2)到(# F3 F3))；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//我们最初隐藏所有下拉菜单$('#dropdown_nav li ').查找('。子导航').hide()；//当悬停在主导航链接上时，我们会找到对应链接的下拉菜单$('#dropdown_nav li ').悬停(函数(){//查找类为的“这个”的子级子导航并使美丽法丁.$(这个)。查找('。子导航').法丁(100);}，function(){//再做一次，只是这次淡出.$(这个)。查找('。子导航').淡出(50)；});});/剧本/头身H2使用CSS3 jQuery/H2 ul id=' Drop Down _ Nav ' lia class=' first ' href=' # ' Home/a/Li lia href=' # ' ASP源码下载/a ul class='sub_nav' lia href='# '新闻类/a/li lia href='# '论坛类/a/li lia href='# '企业类/a/li /ul /li lia href='# '技术文章/a ul class=' sub _ nav ' lia href=' # ' ASP/a/Li lia href=' # ' PHP/a/Li lia href=' # jquery/a/Li lia href=' # ' Ajax/a/Li/ul/Li lia href=' # ' Freebies/a/Li lia class=' last ' href=' # '网页特效/a ul class='sub_nav' lia href='# '导航菜单/a/li lia href='#'CSS布局/a/li lia href='# '鼠标特效/a/li /ul /li /ulbr //body/html希望本文所述对大家的jquery程序设计有所帮助。