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");

});

});

效果图