本文举例说明了jQuery实现灰蓝风格标准两级下拉菜单效果的代码。分享给大家参考。具体如下：

这是一个基于jQuery的标准二级菜单。这是一个漂亮的灰蓝色下拉级联菜单。代码已经被完美地修改了。目前兼容性很好。你可以通过复制代码来使用它，甚至不用修改它。

运行效果截图如下：

在线演示地址如下：

http://demo . 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' /titlejQuery标准型二级菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS '正文{ margin :0划水：0;font-size :12 px} a :链接{ color : # 1553 a9文本装饰：无；} a :已访问{ text-摆设：无；color: # 1553a9} a :悬停{ text-decoration : nonecolor : # f 46662 } a : active { text-decoration : none；color : # f 46662 } # main { width :910 pmargin :0 auto } # menu { margin-top :20 px；位置：绝对；} .m1 { float:left宽度宽度：100像素文本对齐：居中；颜色： # 3a3a3a背景-color : # bcbcbc；border: # 9a9b9b 1px固体；右边框：0;padd :10 xpadding-top :13 px；光标：指针指针；} .m 1:悬停{背景色： # 2c 85e 0；颜色：白色；} . m2 { position : absolutemargin-top :39 px；宽度宽度：120像素背景-颜色： # E4 E4；border:#cdcece 1px固体；color : # 66666 display : none } . m2表格{宽度：100%；线高：35 px}.m2表格tr TD { text-align : center边框-top : # B4 B4 1px虚线；光标：指针指针；}/style脚本类型=' text/JavaScript ' $(function(){ $()。m1’.mouseover(函数(){ $(this)).父项()。下一个(' .m2 ').fadeIn()；}).mouseout(函数(){ $(此)).父项()。下一个(' .m2 ').css('display '，' none ')；});$(".m2”).mouseover(函数(){ $(this)).css('display '，' block ')；$(这个)。prev().儿童()。css(“”背景色，' #2c85e0 ').css(“”颜色','白色');}).mouseout(函数(){ $(此)).css('display '，' none ')；$(这个)。prev().儿童()。css(“”背景色，' #bcbcbc ').css('color '，' # 3a 3a 3a ')；});});/script/head dydiv id=' main ' div id=' menu ' a href=' # ' target=' _ blank ' span class=' m1 '论坛首页/span/a a href=' # ' target=' _ blank ' span class=' m1 '学生工作/span/a div class=' m2 ' style=' left :121 px；table trtd style=' border :0 ' a href=' # ' target=' _ blank '学院首页/a/TD/tr trtda href=' # ' target=' _ blank '学院首页/a/TD/tr trtda href=' # ' target=' _ blank '学院首页/a/TD/tr/table/div a href=' # ' target=' _ blank ' span class=' m1 '师资队伍/span/a div class=' m2 ' style=' left :242 px；'table trtd style=' border :0 ' a href=' # ' target=' _ blank '学院首页/a/TD/tr trtda href=' # ' target=' _ blank '学院首页/a/TD/tr trtda href=' # ' target=' _ blank '学院首页/a/TD/tr/table/diva href=' # ' target=' _ blank ' span class=' m1 '学科专业/span/a div class=' m2 ' style=' left :363 px；table trtd style=' border :0 ' a href=' # ' target=' _ blank '本科专业/a/TD/tr trtda href=' # ' target=' _ blank '硕士专业/a/TD/tr trtda href=' # ' target=' _ blank '博士专业/a/TD/tr/table/div a href=' # ' target=' _ blank ' span class=' m1 '教学改革/span/a div class=' m2 ' style=' left :484 px；table trtd style=' border :0 ' a href=' # ' target=' _ blank '教学体制/a/TD/tr trtda href=' # ' target=' _ blank '学院首页/a/TD/tr trtda href=' # ' target=' _ blank '科研教学/a/TD/tr/table/div a href=' # ' target=' _ blank ' span class=' m1 '党建工作/span/a div class=' m2 ' style=' left :605 px；table trtd style=' border :0 ' a href=' # ' target=' _ blank '学生党建/a/TD/tr trtda href=' # ' target=' _ blank '学院党建/a/TD/tr/table/div a href=' # ' target=' _ blank ' span class=' m1 '联系我们/span/a div class=' m2 ' style=' left :725 px；'table trtd style=' border :0 ' a href=' # ' target=' _ blank '老师电话/a/TD/tr trtda href=' # ' target=' _ blank '领导传真/a/TD/tr trtda href=' # ' target=' _ blank '学校地址/a/TD/tr trtda href=' # ' target=' _ blank '卫星地图/a/TD/tr/table/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。