<!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>
<title>jquery 竖向二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
body {
font-family: helvetica, arial, sans-serif;
font-size: 0.9em;
}
p {
line-height: 1.5em;
}
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
}
ul#menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul#menu li a:hover {
background: #000;
}
ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
.code {
border: 1px solid #ccc;
list-style-type: decimal-leading-zero;
padding: 5px;
margin: 0;
}
.code code {
display: block;
padding: 3px;
margin-bottom: 0;
}
.code li {
background: #ddd;
border: 1px solid #ccc;
margin: 0 0 2px 2.2em;
}
.indent1 {
padding-left: 1em;
}
.indent2 {
padding-left: 2em;
}
</style>
<!--[if lt ie 8]>
<style type="text/css">
li a{display:inline-block;}
li a{display:block;}
</style>
<![endif]-->
<script src="/jquery-1.2.1.min.js" type="text/网页特效"></script> 文件县官方下载
<script type="text/javascript">
function initmenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkelement = $(this).next();
if((checkelement.is('ul')) && (checkelement.is(':visible'))) {
return false;
}
if((checkelement.is('ul')) && (!checkelement.is(':visible'))) {
$('#menu ul:visible').slideup('normal');
checkelement.slidedown('normal');
return false;
}
}
);
}
$(document).ready(function() {initmenu();});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<ul id="menu">
<li>
<a href="#">weblog tools</a>
<ul>
<li><a href="#">pivotx</a></li>
<li><a href="#">wordpress</a></li>
</ul>
</li>
<li>
<a href="#">programming languages</a>
<ul>
<li><a href="#">php教程</a></li>
<li><a href="#">ruby</a></li>
<li><a href="#">python</a></li>
<li><a href="#">perl</a></li>
<li><a href="#">java</a></li>
<li><a href="#">c#</a></li>
</ul>
</li>
<li><a href="http://www.zzsky.cn" target="_blank">zzsky(no submenu)</a></li>
<li>
<a href="#">cool stuff</a>
<ul>
<li><a href="#">apple</a></li>
<li><a href="#">maitianquan</a></li>
<li><a href="#">xbox360</a></li>
<li><a href="#">nifengla</a></li>
<li><a href="#">nintendo</a></li>
</ul>
</li>
<li>
<a href="#">search engines</a>
<ul>
<li><a href="#">yahoo!</a></li>
<li><a href="#">google</a></li>
<li><a href="#">ask.com</a></li>
<li><a href="#">live search</a></li>
</ul>
</li>
</ul>
</body>
</html>