<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend { padding: 0; margin: 0; } body { font: 12px/normal Verdana, Arial, Helvetica, sans-serif; } ul, li { list-style-type: none; text-transform: capitalize; } .clear { clear: both; *display: inline; /*IE only*/ } #nav { margin: 0 auto 60px; width: 1080px; display: block; } #nav .jquery_out { float: left; line-height: 32px; display: block; border-right: 1px solid #fff; text-align: center; color: #fff; font: 18px/32px; background: #062723 url(images/slide-panel_03.png) 0 0 repeat-x; } #nav .jquery_out .smile { padding-left: 1em; } #nav .jquery_inner { margin-left: 16px; } #nav .jquery { margin-right: 1px; padding: 0 2em; } #nav .mainlevel { background: #ffe60c; float: left; border-right: 1px solid #fff; width: 140px; /*IE6 only*/ } #nav .mainlevel a { color: #000; text-decoration: none; line-height: 32px; display: block; padding: 0 20px; width: 100px; } #nav .mainlevel a:hover { color: #fff; text-decoration: none; background: #062723 url(images/slide-panel_03.png) 0 0 repeat-x; } #nav .mainlevel ul { display: none; position: absolute; } #nav .mainlevel li { border-top: 1px solid #fff; background: #ffe60c; width: 140px; /*IE6 only*/ } .log { text-align: center; color: skyblue; line-height: 24px; text-transform: capitalize; margin: 50px auto; } </style> <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li.mainlevel').mousemove(function () { $(this).find('ul').slideDown();//you can give it a speed }); $('li.mainlevel').mouseleave(function () { $(this).find('ul').slideUp("fast"); }); }); </script> <title>jquery下拉竖导航菜单代码</title> </head> <body> <br /><br /><br /><br /><br /><br /> <div id="menu"> <ul id="nav"> <li class="jquery_out"> <div class="jquery_inner"> <div class="jquery"> <span class="text">let'jquery</span><span class="smile">^_^</span> </div> </div> </li> <li class="mainlevel" id="mainlevel_01"> <a href="#" target="_blank">do touch me</a> <ul id="sub_01"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">slideUp</a></li> <li><a href="#" target="_blank">slideDown</a></li> <li><a href="#" target="_blank">animate</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_02"> <a href="#" target="_blank">do touch me</a> <ul id="sub_02"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">slideUp</a></li> <li><a href="#" target="_blank">slideDown</a></li> <li><a href="#" target="_blank">up and down</a></li> <li><a href="#" target="_blank">animate</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_03"> <a href="#" target="_blank">do touch me</a> <ul id="sub_03"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">animate</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_04"> <a href="#" target="_blank">do touch me</a> <ul id="sub_04"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">slideUp</a></li> <li><a href="#" target="_blank">slideDown</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_05"> <a href="#" target="_blank">do touch me</a> <ul id="sub_05"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">slideDown</a></li> <li><a href="#" target="_blank">up and down</a></li> <li><a href="#" target="_blank">animate</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_06"> <a href="#" target="_blank">do touch me</a> <ul id="sub_06"> <li><a href="#" target="_blank">JavaScript</a></li> <li><a href="#" target="_blank">jQuery</a></li> <li><a href="#" target="_blank">slideUp</a></li> <li><a href="#" target="_blank">slideDown</a></li> <li><a href="#" target="_blank">up and down</a></li> </ul> </li> <div class="clear"></div> </ul> </div> <p align="center"></p> <p align="center"></p> </body> </html>
效果：
