コードをコピー コードは次のとおりです: 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> <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> <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> <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> <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> <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> 导航菜单< ;ul>导航菜单二级分类 » 123导航菜单三 »< ;ul>导航菜单41< /ul>12 翻页 12< ;/a>