jquery实现简单的二级导航下拉菜单效果

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

jQuery代码实现的二级导航菜单效果，非常简洁，喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级，CSS的配合也是挺重要的，不多说了，要代码的就直接复制吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/

具体代码如下：

.ddsmoothmenu {
 MARGIN: 0px auto; FONT: 12px Verdana; WIDTH: 730px
}
.ddsmoothmenu UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px;BACKGROUND: #2b9801; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.ddsmoothmenu UL LI {
 DISPLAY: block; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center
}
 HTML .ddsmoothmenu UL LI {
 FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center
}
.ddsmoothmenu UL LI A {
 DISPLAY: block; FONT-WEIGHT: bold; WIDTH: 81px; TEXT-DECORATION: none
}
.ddsmoothmenu UL LI A:link {
 COLOR: #fff
}
.ddsmoothmenu UL LI A:visited {
 COLOR: #fff
}
.ddsmoothmenu UL LI A:hover {
 COLOR: #ffff00
}
.ddsmoothmenu UL LI UL {
 LEFT: 0px; VISIBILITY: hidden; POSITION: absolute
}
.ddsmoothmenu UL LI UL LI {
 BACKGROUND: #2b9801; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 25px; BORDER-BOTTOM: #96d47d 1px solid
}
.ddsmoothmenu UL LI UL LI A {
 DISPLAY: block; WIDTH: 81px; TEXT-DECORATION: none
}
.ddsmoothmenu UL LI UL LI A:hover {
 BACKGROUND: #51b228
}
.ddsmoothmenu UL LI UL LI UL {
 TOP: 0px
}
.downarrowclass {
 DISPLAY: none; POSITION: absolute
}
.rightarrowclass {
 DISPLAY: none; POSITION: absolute
}
.ddshadow {
 BACKGROUND: silver; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px
}
.toplevelshadow {
 opacity: 0.8
}





 
首页 
 
 
一年级 
 

 
一年级1班 
 
一年级2班 
 
一年级3班 
 
一年级4班 
 
一年级5班 
 
 
二年级 
 

 
二年级1班 
 
二年级2班 
 
二年级3班 
 
二年级4班 
 
二年级5班 
 
 
三年级 
 

 
三年级1班 
 
三年级2班 
 
三年级3班 
 
三年级4班 
 
三年级5班 
 
四年级 
 

 
四年级1班 
 
四年级2班 
 
四年级3班 
 
四年级4班 
 
四年级5班 
 
 
五年级 
 

 
五年级1班 
 
五年级2班 
 
五年级3班 
 
五年级4班 
 
五年级5班 
 
 
六年级 
 

 
六年级1班 
 
六年级2班 
 
六年级3班 
 
六年级4班 
 
六年级5班 
 
 
七年级 
 

 
七年级1班 
 
七年级2班 
 
七年级3班 
 
七年级4班 
 
七年级5班 
 

希望本文所述对大家的jquery程序设计有所帮助。