效果：http://hovertree.com/texiao/nav/1/
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base target="_blank" /> <style> .nav * { margin: 0; padding: 0; list-style: none; } .nav { width: 700px; height: 30px; line-height: 30px; margin: 2px auto; } .nav li a { color: #fff; text-decoration: none; display: block; float: left; height: 30px; line-height: 30px; padding: 0px 15px; font-size: 12px; background: #636871; } .nav li a:hover { background: #4b505a; } .nav li { float: left; position: relative; height: 30px; line-height: 30px; } .nav li .second { position: absolute; left: 0; display: none; } .hovertreeinfo { width: 100%; height: 234px; text-align: center; } .hovertreeinfo a { color: blue; } </style> </head> <body> <div class="hovertreeinfo"> <h1>jQuery上弹菜单</h1> <a href="http://hovertree.com/h/bjaf/kxl2s00m.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">推荐</a> <a href="http://hovertree.com/texiao/nav/1/1.htm">Demo 2</a> </div> <ul class="nav"> <li> <a href=\'http://hovertree.com/\'>首页</a> <div class="second"> <a href=\'http://hovertree.com/texiao/\'>特效</a> <a href=\'http://hovertree.com/map/\'>导航</a> <a href=\'http://hovertree.com/hvtart/bjae/5w5svpu4.htm\'>菜单</a> <a href=\'http://hovertree.com/h/bjae/0st5ww13.htm\'>磨砂</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/qufo9d03.htm\'>菜单导航</a> <div class="second"> <a href=\'http://keleyi.com/\'>柯乐义</a> <a href=\'http://hovertree.com/code/css/uofyn8bc.htm\'>何问起</a> <a href=\'http://hovertree.com/texiao/jeasyui/2/\'>EasyUI</a> <a href=\'http://hovertree.com/texiao/keleyi/\'>Keleyi</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/citydate.htm\'>时间日期</a> <div class="second"> <a href=\'http://hovertree.com/h/bjaf/jshour.htm\'>时间日期</a> <a href=\'http://hovertree.com/code/javascript/sqchrhfe.htm\'>时间日期</a> <a href=\'http://hovertree.com/h/bjaf/p49wvx4e.htm\'>时间日期</a> <a href=\'http://hovertree.com/h/bjaf/46xrokmy.htm\'>时间日期</a> </div> </li> <li> <a href=\'http://hovertree.com/hvtart/bjae/yqhu1ug9.htm\'>焦点图</a> <div class="second"> <a href=\'http://hovertree.com/h/bjaf/8c5uhche.htm\'>焦点图</a> <a href=\'http://hovertree.com/hvtart/bjae/f03e85410878db53.htm\'>焦点图</a> <a href=\'http://hovertree.com/code/jquery/smjv6d0n.htm\'>焦点图</a> <a href=\'http://hovertree.com/h/bjaf/a6598spx.htm\'>焦点图</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/sk1tputv.htm\'>tab标签</a> <div class="second"> <a href=\'http://hovertree.com/hvtart/bjae/wokffp10.htm\'>tab标签</a> <a href=\'http://hovertree.com/h/bjae/9glhm7lv.htm\'>tab标签</a> <a href=\'http://hovertree.com/h/bjaf/uoarumwr.htm\'>tab标签</a> <a href=\'http://hovertree.com/h/bjaf/s6y2vlsx.htm\'>tab标签</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/gundong.htm\'>jquery特效</a> <div class="second"> <a href=\'http://hovertree.com/h/bjaf/picqiehuan.htm\'>jquery特效</a> <a href=\'http://hovertree.com/h/bjaf/41eyinh2.htm\'>jquery特效</a> <a href=\'http://hovertree.com/h/bjaf/vc8993j8.htm\'>jquery特效</a> <a href=\'http://hovertree.com/h/bjaf/6sm1esjw.htm\'>jquery特效</a> </div> </li> <li> <a href=\'http://hovertree.com/hvtart/bjae/yjm6v683.htm\'>在线客服</a> <div class="second"> <a href=\'http://hovertree.com/h/bjaf/mbrpxe4o.htm\'>在线客服</a> <a href=\'http://hovertree.com/h/bjaf/tishiceng.htm\'>在线客服</a> <a href=\'http://hovertree.com/h/bjaf/1kquypy7.htm\'>在线客服</a> <a href=\'http://hovertree.com/h/bjaf/5mkg51yt.htm\'>在线客服</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/3dxfknkj.htm\'>广告代码</a> <div class="second"> <a href=\'http://hovertree.com/h/bjaf/c03itibx.htm\'>广告代码</a> <a href=\'http://hovertree.com/h/bjaf/kqud99m6.htm\'>广告代码</a> <a href=\'http://hovertree.com/h/bjaf/ajw4dsfb.htm\'>广告代码</a> <a href=\'http://hovertree.com/h/bjaf/ws50ueia.htm\'>广告代码</a> </div> </li> <li> <a href=\'http://hovertree.com/h/bjaf/l3c6nm7b.htm\'>相册代码</a> <div class="second"> <a href=\'http://hovertree.com/hvtart/bjae/upnrkt1d.htm\'>相册代码</a> <a href=\'http://hovertree.com/h/bjaf/gk8mko69.htm\'>相册代码</a> <a href=\'http://hovertree.com/texiao/css/23/\'>相册代码</a> <a href=\'http://hovertree.com/texiao/html5/30/\'>相册代码</a> </div> </li> </ul> <div class="hovertreeinfo"></div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function () { var nav = 1; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示 if (nav == 0) { $(\'.nav li\').hover(function () { $(\'.second\', this).css(\'top\', \'30px\').show(); }, function () { $(\'.second\', this).hide(); }); } else if (nav == 1) { $(\'.nav li\').hover(function () { $(\'.second\', this).css(\'bottom\', \'30px\').show(); }, function () { $(\'.second\', this).hide(); }); } }); </script> </body> </html>