jquery/xialacaidan/ target=_blank class=infotextkey>jquery下拉菜单代码
效果图:
下拉菜单
1、html部分
<!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=UTF-8" />
<title>jquery下拉菜单实例_www.jb200.com</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/menu.js"></script>
</head>
<body>
<div id="container">
<!-- 分类菜单 START -->
<div id="menubar">
<ul id="menus" class="menus">
<li class="current-cat"><a title="Home" href="http://jb200.com/">首页</a></li>
<li class="cat-item cat-item-40"><a href="javascript:void(0);" title="View all posts filed under .Net">.Net</a>
<ul class="children">
<li class="cat-item cat-item-41"><a href="javascript:void(0);" title="View all posts filed under ADO.NET">ADO.NET</a></li>
<li class="cat-item cat-item-42"><a href="javascript:void(0);" title="View all posts filed under ASP.NET">ASP.NET</a></li>
<li class="cat-item cat-item-43"><a href="http://jb200.com" title="View all posts filed under C#">C#</a></li>
</ul>
</li>
<li class="cat-item cat-item-50"><a href="http://jb200.com" title="View all posts filed under Java">Java</a>
<ul class="children">
<li class="cat-item cat-item-51"><a href="javascript:void(0);" title="View all posts filed under EJB">EJB</a></li>
<li class="cat-item cat-item-52"><a href="javascript:void(0);" title="View all posts filed under Hibernate">Hibernate</a></li>
<li class="cat-item cat-item-53"><a href="javascript:void(0);" title="View all posts filed under Java core">Java core</a></li>
<li class="cat-item cat-item-54"><a href="javascript:void(0);" title="View all posts filed under JSP">JSP</a></li>
<li class="cat-item cat-item-55"><a href="javascript:void(0);" title="View all posts filed under Spring">Spring</a></li>
<li class="cat-item cat-item-56"><a href="javascript:void(0);" title="View all posts filed under Struts">Struts</a></li>
</ul>
</li>
<li class="cat-item cat-item-60"><a href="javascript:void(0);" title="View all posts filed under Web">Web</a>
<ul class="children">
<li class="cat-item cat-item-61"><a href="javascript:void(0);" title="View all posts filed under (X)HTML">(X)HTML</a></li>
<li class="cat-item cat-item-62"><a href="javascript:void(0);" title="View all posts filed under ACSS">CSS</a></li>
<li class="cat-item cat-item-63"><a href="javascript:void(0);" title="View all posts filed under PHP">PHP</a></li>
<li class="cat-item cat-item-64"><a href="http://jb200.com" title="View all posts filed under JavaScript">JavaScript</a></li>
</ul>
</li>
</ul>
</div>
<!-- 分类菜单 END -->
<div style="clear:both;"></div>
<div id="content">
<h2>Jquery下拉菜单</h2>
<p>一个Jquery下拉菜单实例
</p>
<p></p>
</div>
</div>
</body>
</html>
2、css代码（style.css）
* {
margin:0;
padding:0;
}
h2 {
font-size:14px;
font-weight:bold;
margin:10px 0;
}
p {
margin-bottom:10px;
}
body {
font-size:18px; /* Resets 1em to 10px */
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align:center;
}
#container {
margin:150px auto 0 auto;
width:400px;
text-align:left;
}
/* 导航菜单 START */
/* 菜单项 */
#menubar ul.menus li {
float:left; /* 靠左浮动*/
list-style:none; /* 清空列表风格 */
margin-right:1px; /* 右侧的间隔 */
}
/* 菜单项链接 */
#menubar ul.menus li a {
padding:5px 10px; /* 内边距 */
display:block; /* 显示为块 */
color:#FFF; /* 文字颜色 */
background:#67ACE5; /* 背景颜色 */
text-decoration:none; /* 没有下横线 */
}
/* 当前菜单位置 */
#menubar ul.menus ul {
position:absolute;
}
/* 当前菜单项链接 */
#menubar ul.menus li.current-cat a {
background:#5495CD; /* 背景颜色 */
}
/* 选中菜单项链接 */
#menubar ul.menus li a:hover {
background:#4281B7; /* 背景颜色 */
}
/* 二级菜单 */
#menubar ul.children {
display:none; /* 初始化页面时不显示出来*/
padding:0;
margin:0;
}
/* 二级菜单的菜单项 */
#menubar ul.children li {
float:none; /* 垂直排列 */
margin:0;
padding:0;
}
/* 二级菜单的当前菜单项链接 */
#menubar ul.children li a {
width:100px; /* 对 IE6 来说十分很重要 */
}
3，js代码（menu.js）