CSS代码:
<style type="text/css">
ul, li {
/*清除ul和li上默认的小圆点*/
list-style: none;
}
ul {
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
}
.main {
background-image: url(images/title.gif);
background-repeat: repeat-x;
width: 120px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
display: block;
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a{
color: white;
background-image: url(images/collapsed.gif);
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a{
color: black;
background-image: none;
}
.main ul {
display: none;
}
</style>
JQuery代码:
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//页面中的DOM已经装载完成时,执行的代码
$(".main > a").click(function() {
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
/*
if (ulNode.css("display") == "none") {
ulNode.css("display","block");
} else {
ulNode.css("display","none");
}
*/
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle();
//
//ulNode.slideDown("slow");
//ulNode.slideUp;
ulNode.slideToggle();
changeIcon($(this));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image", "url('images/expanded.gif')");
} else {
mainNode.css("background-image", "url('images/collapsed.gif')");
}
}
}
</script>
HTML代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
</head>
<body>
<ul>
<li class="main"><a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项1_1</a></li>
<li><a href="#">子菜单项1_2</a></li>
<li><a href="#">子菜单项1_3</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项2_1</a></li>
<li><a href="#">子菜单项2_2</a></li>
<li><a href="#">子菜单项2_3</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项3_1</a></li>
<li><a href="#">子菜单项3_2</a></li>
<li><a href="#">子菜单项3_3</a></li>
</ul>
</li>
</ul>
</body>
</html>