复制代码 代码如下: jquery实现多级下拉菜单-柯乐义 <BR>/* navigation style */<BR>#keleyi-com-nav{<BR>height: 39px;<BR>font: 12px Geneva, Arial, Helvetica, sans-serif;<BR>background: #2D2D2D;<BR>border: 1px solid #323232; <BR>border-radius: 3px;<BR>min-width:500px;<BR>margin-left: 0px;<BR>padding-left: 0px;<BR>} <P>#keleyi-com-nav li{<BR>list-style: none;<BR>display: block;<BR>float: left;<BR>height: 40px;<BR>position: relative;<BR>border-right: 1px solid #323232;<BR>} <P>#keleyi-com-nav li a{<BR>padding: 0px 10px 0px 30px;<BR>margin: 0px 0;<BR>line-height: 40px;<BR>text-decoration: none;<BR>border-right: 1px solid #636161;<BR>height: 40px;<BR>color: #FFF;<BR>text-shadow: 1px 1px 1px #66696B;<BR>} <P>#keleyi-com-nav ul{<BR>background: #f2f5f6; <BR>padding: 0px;<BR>border-bottom: 1px solid #DDDDDD;<BR>border-right: 1px solid #DDDDDD;<BR>border-left:1px solid #DDDDDD;<BR>border-radius: 0px 0px 3px 3px;<BR>box-shadow: 2px 2px 3px #ECECEC;<BR>-webkit-box-shadow: 2px 2px 3px #ECECEC;<BR>-moz-box-shadow:2px 2px 3px #ECECEC;<BR>width:170px;<BR>}<BR>#keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{<BR>padding-left: 10px;<BR>padding-right: 10px;<BR>color: #FFF;<BR>background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;<BR>width: 160px;<BR>}<BR>#keleyi-com-nav .site-name a{<BR>width: 129px;<BR>overflow:hidden;<BR>}<BR>#keleyi-com-nav li.facebook{<BR>background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;<BR>}<BR>#keleyi-com-nav li.facebook:hover {<BR>background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;<BR>}<BR>#keleyi-com-nav li.yahoo{<BR>background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;<BR>}<BR>#keleyi-com-nav li.yahoo:hover {<BR>background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;<BR>} <P><BR>#keleyi-com-nav li:hover{<BR>background: #010101;<BR>}<BR>#keleyi-com-nav li a{<BR>display: block;<BR>}<BR>#keleyi-com-nav ul li {<BR>border-right:none;<BR>border-bottom:1px solid #DDDDDD;<BR>width:170px;<BR>height:39px;<BR>}<BR>#keleyi-com-nav ul li a {<BR>border-right: none;<BR>color:#6791AD;<BR>text-shadow: 1px 1px 1px #FFF;<BR>border-bottom:1px solid #FFFFFF;<BR>}<BR>#keleyi-com-nav ul li:hover{background:#DFEEF0;}<BR>#keleyi-com-nav ul li:last-child { border-bottom: none;}<BR>#keleyi-com-nav ul li:last-child a{ border-bottom: none;}<BR>/* Sub menus */<BR>#keleyi-com-nav ul{<BR>display: none;<BR>visibility:hidden;<BR>position: absolute;<BR>top: 40px;<BR>} <P>/* Third-level menus */<BR>#keleyi-com-nav ul ul{<BR>top: 0px;<BR>left:170px;<BR>display: none;<BR>visibility:hidden;<BR>border: 1px solid #DDDDDD;<BR>}<BR>/* Fourth-level menus */<BR>#keleyi-com-nav ul ul ul{<BR>top: 0px;<BR>left:170px;<BR>display: none;<BR>visibility:hidden;<BR>border: 1px solid #DDDDDD;<BR>} <P>#keleyi-com-nav ul li{<BR>display: block;<BR>visibility:visible;<BR>}<BR>#keleyi-com-nav li:hover > ul{<BR>display: block;<BR>visibility:visible;<BR>}<BR> <BR>$(document).ready(function () {<BR>$("#kel"+"eyi-com-nav li").hover(<BR>function () {<BR>$(this).children('ul').hide();<BR>$(this).children('ul').slideDown('fast');<BR>},<BR>function () {<BR>$('ul', this).slideUp('fast');<BR>});<BR>});<BR> 导航菜单 导航菜单二级分类 » 1 2 3 导航菜单三 » 导航菜单4 1 1 2 翻页 1 2
