先是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");
});
});
效果图