<!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=gb2312" />
<title>jquery下拉菜单</title>
</head>
<body>
简介
我遇到一些网站和一个下拉列表专门作出公正的rss订阅下降。他们那样做，因为他们有不同的不同类别的rss提要。我认为这是非常有用，因为它所有的rss源分组在一起，显示它只有当用户需要。节省空间和更简单的用户界面。
所以，我们在这里，我们将创建一个简单的菜单下为它下降。人们很容易对皮肤，而且容易理解它是如何工作以及
html代码
<ul id="dropdown">
<li><a href="#" class="parent">rss subscription</a>
<ul class="children">
<li><a href="#">all categories</a></li>
<li><a href="#">ajax</a></li>
<li><a href="#">css html</a></li>
<li><a href="#">design</a></li>
<li><a href="#">typography</a></li>
<li><a href="#">网页特效</a></li>
<li><a href="#">php教程 mysql教程</a></li>
<li><a href="#">wallpaper</a></li>
<li><a href="#">wordpress</a></li>
</ul>
</li>
</ul>
css
有两件事情，我们需要的风格主要ul列表（家长），之后，款式第二ul列表（儿童）。家长名单应具有相对的位置。儿童名单必须有绝对的位置，z -索引设置为最高，默认情况下隐藏的
<style>
body {
font-family:arial;
}
a {
text-decoration:none;
color:#666;
}
a:hover {
color:#e11;
}
#dropdown {
/* cancel the default list style */
list-style:none;
margin:0;
padding:0;
width:180px;
position:relative;
}
#dropdown li {
}
#dropdown li a.parent {
display:block;
width:180px; height:40px;
font-weight:700;
padding:0 0 0 10px;
line-height:35px;
background:url(parent.gif) 0px 0px no-repeat;
}
#dropdown li a.hover {
background:url(parent.gif) 0px -40px no-repeat;
}
#dropdown ul {
/* cancel the default list style */
margin:0;
padding:0;
list-style:none;
display:none;
/* make sure it has the highest z-index */
position:absolute;
left:0;
z-index:500;
background:#fff;
width:180px;
background:url(child.gif) left bottom no-repeat;
}
#dropdown ul li {
font-size:11px;
}
#dropdown ul li a {
display:block;
font-weight:700;
padding:0 0 0 10px;
height:30px;
color:#fff;
}
#dropdown ul li a:hover {
color:#e11
}
</style>
javascript
javascript是相当简单，只是一个平常悬停事件。我把show（）和隐藏（）来显示子菜单（我认为我们可以做出一个基于css的下拉菜单，而无需使用javascript的下降），但是，如果你想香料它，你可以使用其他类似淡入动画/淡出或效果基本show
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function () {
$('#dropdown').hover(
function () {
//change the background of parent menu
$('#dropdown li a.parent').addclass('hover');
//display the submenu
$('#dropdown ul.children').show();
},
function () {
//change the background of parent menu
$('#dropdown li a.parent').removeclass('hover');
//display the submenu
$('#dropdown ul.children').hide();
}
);
});
</script>
</body>
</html>