支持多种浏览器，体验效果：
http://keleyi.com/keleyi/phtml/jqmenu/4.htm
多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jquery实现多级下拉菜单-柯乐义</title> 5 <style> 6 /* navigation style */ 7 #keleyi-com-nav{ 8 height: 39px; 9 font: 12px Geneva, Arial, Helvetica, sans-serif; 10 background: #2D2D2D; 11 border: 1px solid #323232; 12 border-radius: 3px; 13 min-width:500px; 14 margin-left: 0px; 15 padding-left: 0px; 16 } 17 18 #keleyi-com-nav li{ 19 list-style: none; 20 display: block; 21 float: left; 22 height: 40px; 23 position: relative; 24 border-right: 1px solid #323232; 25 } 26 27 #keleyi-com-nav li a{ 28 padding: 0px 10px 0px 30px; 29 margin: 0px 0; 30 line-height: 40px; 31 text-decoration: none; 32 border-right: 1px solid #636161; 33 height: 40px; 34 color: #FFF; 35 text-shadow: 1px 1px 1px #66696B; 36 } 37 38 #keleyi-com-nav ul{ 39 background: #f2f5f6; 40 padding: 0px; 41 border-bottom: 1px solid #DDDDDD; 42 border-right: 1px solid #DDDDDD; 43 border-left:1px solid #DDDDDD; 44 border-radius: 0px 0px 3px 3px; 45 box-shadow: 2px 2px 3px #ECECEC; 46 -webkit-box-shadow: 2px 2px 3px #ECECEC; 47 -moz-box-shadow:2px 2px 3px #ECECEC; 48 width:170px; 49 } 50 #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{ 51 padding-left: 10px; 52 padding-right: 10px; 53 color: #FFF; 54 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px; 55 width: 160px; 56 } 57 #keleyi-com-nav .site-name a{ 58 width: 129px; 59 overflow:hidden; 60 } 61 #keleyi-com-nav li.facebook{ 62 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px; 63 } 64 #keleyi-com-nav li.facebook:hover { 65 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101; 66 } 67 #keleyi-com-nav li.yahoo{ 68 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px; 69 } 70 #keleyi-com-nav li.yahoo:hover { 71 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101; 72 } 73 74 75 #keleyi-com-nav li:hover{ 76 background: #010101; 77 } 78 #keleyi-com-nav li a{ 79 display: block; 80 } 81 #keleyi-com-nav ul li { 82 border-right:none; 83 border-bottom:1px solid #DDDDDD; 84 width:170px; 85 height:39px; 86 } 87 #keleyi-com-nav ul li a { 88 border-right: none; 89 color:#6791AD; 90 text-shadow: 1px 1px 1px #FFF; 91 border-bottom:1px solid #FFFFFF; 92 } 93 #keleyi-com-nav ul li:hover{background:#DFEEF0;} 94 #keleyi-com-nav ul li:last-child { border-bottom: none;} 95 #keleyi-com-nav ul li:last-child a{ border-bottom: none;} 96 /* Sub menus */ 97 #keleyi-com-nav ul{ 98 display: none; 99 visibility:hidden; 100 position: absolute; 101 top: 40px; 102 } 103 104 /* Third-level menus */ 105 #keleyi-com-nav ul ul{ 106 top: 0px; 107 left:170px; 108 display: none; 109 visibility:hidden; 110 border: 1px solid #DDDDDD; 111 } 112 /* Fourth-level menus */ 113 #keleyi-com-nav ul ul ul{ 114 top: 0px; 115 left:170px; 116 display: none; 117 visibility:hidden; 118 border: 1px solid #DDDDDD; 119 } 120 121 #keleyi-com-nav ul li{ 122 display: block; 123 visibility:visible; 124 } 125 #keleyi-com-nav li:hover > ul{ 126 display: block; 127 visibility:visible; 128 } 129 </style> 130 <!--[if IE 7]> 131 <style> 132 #keleyi-com-nav{ 133 margin-left:0px 134 } 135 #keleyi-com-nav ul{ 136 left:-40px; 137 } 138 #keleyi-com-nav ul ul{ 139 left:130px; 140 } 141 #keleyi-com-nav ul ul ul{ 142 left:130px; 143 } 144 </style> 145 <![endif]--> 146 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 147 <script type="text/javascript"> 148 $(document).ready(function () { 149 $("#kel"+"eyi-com-nav li").hover( 150 function () { 151 $(this).children('ul').hide(); 152 $(this).children('ul').slideDown('fast'); 153 }, 154 function () { 155 $('ul', this).slideUp('fast'); 156 }); 157 }); 158 </script> 159 </head> 160 <body> 161 <ul id="keleyi-com-nav"> 162 <li class="site-name"><a href="http://keleyi.com"> </a></li> 163 <li class="yahoo"><a href="http://keleyi.com">导航菜单</a> 164 <ul> 165 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">导航菜单二级分类 »</a> 166 <ul> 167 <li><a href="http://keleyi.com">1</a></li> 168 <li><a href="http://keleyi.com/a/bjac/r55i6646.htm">2</a></li> 169 <li><a href="http://keleyi.com">3</a></li> 170 <li><a href="http://keleyi.com">导航菜单三 »</a> 171 <ul> 172 <li><a href="http://keleyi.com">导航菜单4</a></li> 173 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm">1</a></li> 174 </ul> 175 </li> 176 </ul> 177 </li> 178 <li><a href="http://keleyi.com">1</a></li> 179 <li><a href="http://keleyi.com">2</a></li> 180 </ul> 181 </li> 182 <li class="facebook"><a href="http://keleyi.com">翻页</a> 183 <ul> 184 <li><a href="http://keleyi.com">1</a></li> 185 <li><a href="http://keleyi.com">2</a></li> 186 </ul> 187 </li> 188 </ul> 189 </body> 190 </html>
更多菜单：http://keleyi.com/a/bjac/veugsmw9.htm
