css文件内容：
* {
margin: 0px; padding: 0px;
}
h2 {
margin: 10px 0px; font-size: 14px; font-weight: bold;
}
p {
margin-bottom: 10px;
}
body {
text-align: center; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 62.5%;
}
#container {
margin: 150px auto 0px; width: 400px; text-align: left;
}
#menubar ul.menus li {
list-style: none; margin-right: 1px; float: left;
}
#menubar ul.menus li a {
background: rgb(103, 172, 229); padding: 20px 30px; color: rgb(255, 255, 255); text-decoration: none; display: block;
}
#menubar ul.menus ul {
position: absolute;
}
#menubar ul.menus li.current-cat a {
background: rgb(84, 149, 205);
}
#menubar ul.menus li a:hover {
background: rgb(66, 129, 183);
}
#menubar ul.children {
margin: 0px; padding: 0px; display: none;
}
#menubar ul.children li {
margin: 0px; padding: 0px; float: none;
}
#menubar ul.children li a {
width: 100px;
}
jsp内容：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path", path);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu Demo</title>
<link rel="stylesheet" href="${path}/style/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="${path }/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" >
jQuery(document).ready(function(){
// 找到所有菜单, 并添加显示和隐藏菜单事件
jQuery('#menus > li').each(function(){
jQuery(this).hover(
// 显示菜单
function(){
jQuery(this).find('ul:eq(0)').show();
},
// 隐藏菜单
function(){
jQuery(this).find('ul:eq(0)').hide();
}
);
});
});
</script>
</head>
<body>
<div id="container">
<!-- 分类菜单 START -->
<div id="menubar">
<ul id="menus" class="menus">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under .Net">.Net</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ADO.NET">ADO.NET</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ASP.NET">ASP.NET</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under C#">C#</a></li>
</ul>
</li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Java">Java</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under EJB">EJB</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Hibernate">Hibernate</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Java core">Java core</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under JSP">JSP</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Spring">Spring</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Struts">Struts</a></li>
</ul>
</li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Web">Web</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under (X)HTML">(X)HTML</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ACSS">CSS</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under PHP">PHP</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under JavaScript">JavaScript</a></li>
</ul>
</li>
</ul>
</div>
<!-- 分类菜单 END -->
<div style="clear:both;"></div>
</div>
</body>
</html>
分享到：
相关推荐
jquery实现多级导航菜单效果 滑动效果
一款非常实用的jquery导航菜单切换效果，兼容所有浏览器，代码易懂，注册详细！
主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下
jQuery弹性滑动导航菜单 压缩包内所需东西都在，只需导入即可实现
Jquery实现无限级别导航菜单插件是一款功能很功能且很实用的插件，做网站不可缺少的神兵利器之一，刚好最近有位上海的网友留言需要一个3级的导航菜单，为了满足更多网友的需求，漫画就去收集了此插件，有了它之后你...
jquery 导航菜单 特效 很酷的效果。
jquery下拉全屏导航菜单（源码），这是一款很大气，使用，方便的下拉全屏导航菜单，只需下载便可使用，多多分享，给大家带来更好的东西！
jquery背景滑动导航菜单代码是一款基于jQuery实现的背景可滑动的导航，鼠标经过导航时导航背景可滑动。
鼠标移动到导航上后，导航内容向左滑出隐藏
jQuery横向下拉导航菜单是一款基于jQuery实现的超酷纵向或者横向动态下拉导航菜单，鼠标滑过主菜单动态显示风格时尚的下拉菜单，菜单可以横向或者纵向显示。
JQuery横向纵向菜单，非常完美，缓慢滑动效果，个人觉得不错。。。
fisheye-menu.zip 实现的导航菜单 包含例子和源码
jQuery个性动画二级下拉导航菜单基于jquery1.8.3.min.js制作，鼠标经过显示二级下拉菜单。
bootsnav是一个基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。本代码适用浏览器：...
jquery标签式导航菜单，导航菜单颜色灰色，采用jquery+css实现，很实用的一个导航菜单。
jquery实现的隐藏在屏幕侧面的导航菜单
jQuery实现简单的下拉菜单导航功能示例.docx
jQuery实现简单的比较流畅的下拉导航菜单效果.zip
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...
jQuery实现移动客户端多级下拉导航菜单