jquery+css+jsp实现下拉导航菜单

先是jsp（部分）

<%@ page language="java" pageEncoding="gb2312"%>


<link rel="stylesheet" type="text/css" href="css/xldhcd.css" />

<script type="text/javascript" src="js/xldhcd.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<div id="menu" style="position:absolute;z-index:3">
<table width="930" height="100%" align="center">
<tr width="100%" height="100%">
<td width="100%" height="100%">
<ul id="nav">
   <li class="mainlevel" id="mainlevel_01"><a href="http://news.sina.com.cn/" target="_blank">要闻</a>
   <ul id="sub_01">
   <li><a href="http://news.sina.com.cn/" target="_blank">新浪新闻</a></li>
<li><a href="http://news.sohu.com/" target="_blank">搜狐新闻</a></li>
<li><a href="http://news.qq.com/" target="_blank">腾讯新闻</a></li>
   </ul>
   </li>
   <li class="mainlevel" id="mainlevel_02"><a href="http://blog.csdn.net" target="_blank">博客</a>
   <ul id="sub_02">
   <li><a href="http://blog.sina.com.cn/" target="_blank">新浪博客</a></li>
<li><a href="http://blog.sohu.com/" target="_blank">搜狐博客</a></li>
<li><a href="http://blog.163.com/?fromNavigation" target="_blank">网易博客</a></li>
<li><a href="http://blog.qq.com/" target="_blank">腾讯博客</a></li>


   </ul>
   </li>
   <li class="mainlevel" id="mainlevel_03"><a href="http://finance.sina.com.cn/" target="_blank">财经</a>
   <ul id="sub_03">
  <li><a href="http://www.hexun.com/" target="_blank">和讯网</a></li>
   <li><a href="http://finance.ifeng.com/" target="_blank">凤凰财经</a></li>
   <li><a href="http://finance.sina.com.cn/" target="_blank">新浪财经</a></li>


   </ul>
   </li>
   <li class="mainlevel" id="mainlevel_04"><a href="http://sports.sina.com.cn/" target="_blank">体育</a>
   <ul id="sub_04">
<li><a href="http://sports.sohu.com/" target="_blank">搜狐体育</a></li>
<li><a href="http://sports.163.com/" target="_blank">网易体育</a></li>
<li><a href="http://sports.sina.com.cn/" target="_blank">新浪体育</a></li>
<li><a href="http://sports.qq.com/" target="_blank">腾讯体育</a></li>


   </ul>
   </li>
   <li class="mainlevel" id="mainlevel_05"><a href="http://www.tianya.cn/bbs/index.shtml" target="_blank">社区</a>
   <ul id="sub_07">
   <li><a href="http://www.tianya.cn/bbs/index.shtml" target="_blank">天涯社区</a></li>
<li><a href="http://club.sohu.com" target="_blank">搜狐社区</a></li>
<li><a href="http://dzh.mop.com" target="_blank">猫扑大杂烩</a></li>
<li><a href="http://club.chinaren.com" target="_blank">Chinaren</a></li>
<li><a href="http://www.renren.com/" target="_blank">人人网</a></li>
<li><a href="http://www.kaixin001.com/" target="_blank">开心网</a></li>
   </ul>
   </li>
    <li class="mainlevel" id="mainlevel_06"><a href="http://pic.daqi.com/" target="_blank">图片</a>
   <ul id="sub_08">
<li><a href="http://desktop.yesky.com/" target="_blank">天极桌面</a></li>
<li><a href="http://pic.daqi.com/" target="_blank">大旗贴图</a></li>
<li><a href="http://www.deskcity.com/" target="_blank">桌面城市</a></li>
<li><a href="http://www.tpzj.com/" target="_blank">图片之家</a></li>
<li><a href="http://www.bitauto.com/meinv/" target="_blank">美女车模</a></li>
<li><a href="http://www.meinvtp.net/" target="_blank">靓丽美图</a></li>
   </ul>
   </li>
    <li class="mainlevel" id="mainlevel_07"><a href="http://www.youku.com/" target="_blank">视频</a>
   <ul id="sub_09">
   <li><a href="http://www.youku.com/" target="_blank">优酷网</a></li>
<li><a href="http://www.tudou.com/" target="_blank">土豆网</a></li>
<li><a href="http://www.ku6.com/" target="_blank">酷6网</a></li>
<li><a href="http://www.zhibo8.com/" target="_blank">直播吧</a></li>
<li><a href="http://www.joy.cn/" target="_blank">激动网</a></li>
<li><a href="http://v.6.cn/" target="_blank">六间房秀场</a></li>
   </ul>
   </li>
   <div class="clear"></div>
</ul>
</td>
</tr>
</table>
</div>

css文件

@charset "utf-8";
/* CSS Document */
html, body,div,table,tr,td, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {
padding:0; 
margin:0;
}


body {
font:12px/normal Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
}


.mainlevel ul,li {
list-style-type:none; 
text-transform:capitalize;
}
.clear {
clear:both; 
*display:inline;/*IE only*/
}
/*menu*/
#menu{
height:30px;
width:100%; 
}


#nav {
width:100%; 
display:block;
}


#nav .mainlevel {
background:#c5d26d; 
float:left; 
border-right:1px solid #fff; 
width:7.65%;/*IE6 only*/
font-size:12px;
vertical-align:middle;
}


#nav .mainlevel a {
color:#000; 
text-decoration:none; 
height:100%; 
display:block; 
padding:0 1px; 
width:100%;
line-height:30px; 
text-align:center;
vertical-align:middle;
}


#nav .mainlevel a:hover {
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:#e5d6d6; 
width:100%;/*IE6 only*/
}

js文件

$(document).ready(function(){
  $('li.mainlevel').mousemove(function(){
  $(this).find('ul').slideDown("fast");//you can give it a speed
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').slideUp("fast");
  });
});

效果图