多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容

演示

 

 html文件部分

 

XML/HTML Code复制内容到剪贴板
  1. <ul id="nav">  
  2. <li class="site-name"><a href="#"> </a></li>  
  3.     <li class="yahoo"><a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
  4.         <ul>  
  5.         <li><a href="#">导航菜单二级分类 »</a>              
  6.             <ul>  
  7.                 <li><a href="#">1</a></li>  
  8.                 <li><a href="#">2</a></li>  
  9.                 <li><a href="#">3</a></li>  
  10.                 <li><a href="#">导航菜单三 »</a>  
  11.                 <ul>  
  12.                     <li><a href="#">导航菜单4</a></li>  
  13.                     <li><a href="#">1</a></li>  
  14.                 </ul>  
  15.                 </li>  
  16.             </ul>  
  17.         </li>  
  18.         <li><a href="#">1</a></li>  
  19.         <li><a href="#">2</a></li>  
  20.         </ul>  
  21.     </li>   
  22.     <li class="facebook"><a href="#">翻页</a>  
  23.         <ul>  
  24.         <li><a href="#">1</a></li>  
  25.         <li><a href="#">2</a></li>  
  26.         </ul>  
  27.     </li>  
  28.   
  29.   
  30. </ul>  

js文件

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. $(document).ready(function(){  
  3.     $("#nav li").hover(  
  4.     function(){  
  5.         $(this).children('ul').hide();  
  6.         $(this).children('ul').slideDown('fast');  
  7.     },  
  8.     function () {  
  9.         $('ul', this).slideUp('fast');              
  10.     });  
  11. });  
  12. </script>  

css文件

 

CSS Code复制内容到剪贴板
  1. <style>  
  2. /* navigation style */  
  3. #nav{  
  4.     height: 39px;  
  5.     font: 12px Geneva, Arial, Helvetica, sans-serif;  
  6.     background: #2D2D2D;  
  7.     border: 1px solid #323232;    
  8.     border-radius: 3px;  
  9.     min-width:500px;  
  10.     margin-left: 0px;  
  11.     padding-left: 0px;  
  12. }     
  13.   
  14. #nav li{  
  15.     list-style: none;  
  16.     display: block;  
  17.     float: left;  
  18.     height: 40px;  
  19.     position: relative;  
  20.     border-right: 1px solid #323232;  
  21. }  
  22.   
  23. #nav li a{  
  24.     padding: 0px 10px 0px 30px;  
  25.     margin: 0px 0;  
  26.     line-height: 40px;  
  27.     text-decoration: none;  
  28.     border-right: 1px solid #636161;  
  29.     height: 40px;  
  30.     color: #FFF;  
  31.     text-shadow: 1px 1px 1px #66696B;  
  32. }  
  33.   
  34. #nav ul{  
  35.     background: #f2f5f6;   
  36.     padding: 0px;  
  37.     border-bottom: 1px solid #DDDDDD;  
  38.     border-right: 1px solid #DDDDDD;  
  39.     border-left:1px solid #DDDDDD;  
  40.     border-radius: 0px 0px 3px 3px;  
  41.     box-shadow: 2px 2px 3px #ECECEC;  
  42.     -webkit-box-shadow: 2px 2px 3px #ECECEC;  
  43.     -moz-box-shadow:2px 2px 3px #ECECEC;  
  44.     width:170px;  
  45. }  
  46. #nav .site-name,#nav .site-name:hover{  
  47.     padding-left: 10px;  
  48.     padding-right: 10px;  
  49.     color: #FFF;  
  50.     background: url(images/logo.png) no-repeat 10px 5px;  
  51.     width: 160px;  
  52. }  
  53. #nav .site-name a{  
  54.     width: 129px;  
  55.     overflow:hidden;  
  56. }  
  57. #nav li.facebook{  
  58.     background: url(images/facebook.png) no-repeat 9px 12px;  
  59. }  
  60. #nav li.facebook:hover  {  
  61.     background: url(images/facebook.png) no-repeat 9px 12px #010101;  
  62. }  
  63. #nav li.yahoo{  
  64.     background: url(images/yahoo.png) no-repeat 9px 12px;  
  65. }  
  66. #nav li.yahoo:hover  {  
  67.     background: url(images/yahoo.png) no-repeat 9px 12px #010101;  
  68. }  
  69.   
  70.   
  71. #nav li:hover{  
  72.     background: #010101;  
  73. }  
  74. #nav li a{  
  75.     display: block;  
  76. }  
  77. #nav ul li {  
  78.     border-right:none;  
  79.     border-bottom:1px solid #DDDDDD;  
  80.     width:170px;  
  81.     height:39px;  
  82. }  
  83. #nav ul li a {  
  84.     border-right: none;  
  85.     color:#6791AD;  
  86.     text-shadow: 1px 1px 1px #FFF;  
  87.     border-bottom:1px solid #FFFFFF;  
  88. }  
  89. #nav ul li:hover{background:#DFEEF0;}  
  90. #nav ul li:last-child { border-bottom: none;}  
  91. #nav ul li:last-child a{ border-bottom: none;}  
  92. /* Sub menus */  
  93. #nav ul{  
  94.     display: none;  
  95.     visibility:hidden;  
  96.     position: absolute;  
  97.     top: 40px;  
  98. }  
  99.   
  100. /* Third-level menus */  
  101. #nav ul ul{  
  102.     top: 0px;  
  103.     left:170px;  
  104.     display: none;  
  105.     visibility:hidden;  
  106.     border: 1px solid #DDDDDD;  
  107. }  
  108. /* Fourth-level menus */  
  109. #nav ul ul ul{  
  110.     top: 0px;  
  111.     left:170px;  
  112.     display: none;  
  113.     visibility:hidden;  
  114.     border: 1px solid #DDDDDD;  
  115. }  
  116.   
  117. #nav ul li{  
  118.     display: block;  
  119.     visibility:visible;  
  120. }  
  121. #nav li:hover > ul{  
  122.     display: block;  
  123.     visibility:visible;  
  124. }  
  125. </style>  
  126. <!--[if IE 7]>  
  127. <style>  
  128. #nav{  
  129.     margin-left:0px  
  130. }  
  131. #nav ul{  
  132.     left:-40px;  
  133. }  
  134. #nav ul ul{  
  135.     left:130px;  
  136. }  
  137. #nav ul ul ul{  
  138.     left:130px;  
  139. }  
  140. </style>  
  141. <![endif]-->  

 


原文地址:http://www.freejs.net/article_daohangcaidan_13.html