jquery+CSS实现的多级竖向展开树形TRee菜单效果
(编辑：jimmy 日期: 2026/5/5 浏览：3 次 )
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下：
这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/
具体代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级层叠树形菜单效果</title>
<style>
.topnav {
width: 213px;
padding: 40px 28px 25px 0;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
ul.topnav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.topnav li {}
ul.topnav li a {
line-height: 10px;
font-size: 11px;
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.topnav li a:hover {
background-color:#675C7C;
color:white;
}
ul.topnav ul {
margin: 0;
padding: 0;
display: none;
}
ul.topnav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.topnav ul li a {
padding-left: 20px;
font-size: 10px;
font-weight: normal;
outline:0;
}
ul.topnav ul li a:hover {
background-color:#D3C99C;
color:#675C7C;
}
ul.topnav ul ul li a {
color:silver;
padding-left: 40px;
}
ul.topnav ul ul li a:hover {
background-color:#D3CEB8;
color:#675C7C;
}
ul.topnav span{
float:right;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">
希望本文所述对大家的jquery程序设计有所帮助。
下一篇：jQuery超酷平面式时钟效果代码分享