複製程式碼 程式碼如下: 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>顯示：塊；<br>可見性：可見；<br>}<br>#keleyi-com-nav li:懸停> ul{<br>顯示：塊;<br>可見性：可見;<br>}<br><br><!--[如果IE 7]><BR><style>; <BR>#keleyi-com -nav{<BR>margin-left:0px<BR>}<BR>#keleyi-com-nav ul{<BR>左:-40px;<BR>}<BR>#keleyi -com-nav ul ul{ <BR>左：130px;<BR>}<BR>#keleyi-com-nav ul ul ul{<BR>左：130px;<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> 導航選單二級分類» 1 2 3 導航選單三»< ;ul> 導航選單4 1 1 2 翻頁 1 2< ;/a> 身體>
