<! DOCTYPE html>
<HEAD>
<meta charset=" Utf-8 "/>
< Title> Tree Menu </title>
<style type= "Text/css" media= " All "
a,a:visited {
color: #333;
text-decoration:none;
"
a:hover {
color: #f60;
"
BODY,TD {
font:13px "Geneva", "Arial", "Soong", "Helvetica", Sans-serif;
}
Ul,li {
margin:0;
padding:0;
List-style:none;
}
H1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
}
H1 {
padding:5px;
color: #900;
font:16px Bold "Geneva", "Song Body", "Arial", "Helvetica", Sans-serif;
}
H1 Small {
font-size:11px;
Font-weight:normal;
color: #660;
}
. Treewrap {
width:200px;
}
. Menubox. Titbox A,
. Menubox. Titbox a:visited,
. MenuBox2. Titbox A,
. MenuBox2. Titbox a:visited {
margin-left:10px;
padding-left:40px;
color: #003;
font-size:12px;
Display:block;
}
. Menubox. Titbox h3 a {
Background:url (img/st_folder_open.gif) no-repeat 0 40%;
}
. Menubox. Titbox H3. Fst a {
Background:url (img/st_folder_open.gif) no-repeat 0 40%;
}
. Menubox. Titbox H3. Lst a {
Background:url (img/st_folder.gif) no-repeat 0 40%;
}
. MenuBox2. Titbox h3 a {
Background:url (img/st_folder.gif) no-repeat 0 40%;
}
. MenuBox2. Titbox H3. Fst a {
Background:url (img/st_folder.gif) no-repeat 0 40%;
}
. MenuBox2. Titbox H3. Lst a {
Line-height:250%;background:url (img/st_folder.gif) no-repeat 0 0;
}
/ * This sentence is the key * /
. MenuBox2. txtbox {
Display:none;
}
. Menubox. Txtbox ul li {
padding-left:65px;
line-height:150%;
}
. Menubox. txtbox. num {
color: #e00;
}
. Menubox. Txtbox ul {
Background:url (images/line_y.gif) repeat-y 16px 0;
}
. Menubox. Txtbox ul li {
Background:url (images/t.gif) no-repeat 28px 50%;
}
. Menubox. Txtbox ul Li. Lst {
Background:url (images/t_lst.gif) no-repeat 28px 50%;
}
</style>
<script type= "Text/javascript" >
function Exchgclsname (OBJ,NAMEA,NAMEB) {
var obj = document.getElementById (obj)? document.getElementById (obj): obj;
Obj.classname = Obj.classname = = Namea? Nameb:namea;
}
function ShowMenu (iNo) {
exchgclsname ("Menu_" +ino, "Menubox", "MenuBox2");
}
</script>
<body>
<div class= "Treewrap" >
<div class= "Menubox" id= "Menu_0" >
<div class= "Titbox" >
</div>
<div class= "Txtbox" >
<ul>
<li><a href= "#" > Siberian Wolf </a></li>
<li><a href= "#" > Koharu </a></li>
<li><a href= "#" > Kobayashi </a></li>
<li><a href= "#" > Dragons </a></li>
<li class= "Lst" ><a href= "#" > Pistachios?? </a></li>
</ul>
</div>
</div><!--menubox-->
<div class= "MenuBox2" id= "menu_1" >
<div class= "Titbox" >
<div class= "Txtbox" >
<ul>
<li><a href= "#" > Yang Dong </a></li>
<li><a href= "#" > Thistle </a></li>
<li><a href= "#" > Kobayashi </a></li>
<li><a href= "#" > Dragons </a></li>
<li class= "Lst" ><a href= "#" > Ouyang Shao </a></li>
</ul>
</div>
</div><!--menubox-->
<div class= "MenuBox2" id= "menu_2" >
<div class= "Titbox" >
<div class= "Txtbox" >
<ul>
<li><a href= "#" > Buddies </a></li>
<li><a href= "#" > Ask for money </a></li>
<li><a href= "#" > Owes me money </a></li>
<li><a href= "#" > Lustful </a></li>
<li class= "Lst" ><a href= "#" > Beautiful </a></li>
</ul>
</div>
</div><!--menubox-->
<div class= "MenuBox2" id= "Menu_3" >
<div class= "Titbox" >
<div class= "Txtbox" >
<ul>
<li><a href= "#" >Dodo</a></li>
<li><a href= "#" >Tom</a></li>
<li><a href= "#" > Kobayashi </a></li>
<li><a href= "#" > Dragons </a></li>
<li class= "Lst" ><a href= "#" > Huamei </a></li>
</ul>
</div>
</div><!--menubox-->
<div class= "MenuBox2" >
<div class= "Titbox" >
</div><!--menubox-->
</div>
</body>
Above is I share simple tree-shaped list of QQ display, if there is insufficient place, also please bo friends treatise! Thank you!
Simple tree-shaped catalogue display