testtreeui.html

做的一个数列表的例子

<STYLE TYPE="text/css" TITLE="">
.test ul{list-style:none;} 
.test li{float:left;width:100px;} 
.test{width:100%;} 
.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
.tree2 {
	display:none;
	list-style:none;
}
.tree1 {
	display:block;
	list-style:none;
	border:1px;
	border-color:red;
}
.tree1 li{	
	margin-left:0px
}

.treeNode{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

.treeNode h3{
	padding: 10px 0px 2px 10px;
}

.treeNode a {
	display: block;
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
}

.treeNode a:hover{
	background-color: #dddddd;
}

</STYLE>

<div class="test"> 
<ul>
<li><a href="#">��ҳ</a></li>
<li><a href="#">��Ʒ����</a></li>
<li><a href="#">�������</a></li>
<li><a href="#">����֧��</a></li>
<li><a href="#">b�̹���</a></li>
<li><a href="#">jϵ����</a></li>
</ul> 
</div> 


<a href="#" >root</a>
<ul id="t1" class="tree2" >
<li><a href="#">��ҳ</a></li>
<li><a href="#">��Ʒ����</a></li>
<li><a href="#">�������</a></li>
<li><a href="#">����֧��</a></li>
<li><a href="#">b�̹���</a></li>
<li><a href="#">jϵ����</a></li>
</ul> 

<div class="treeNode">
<h3></h><a href="#" >root</a></h3>
<ul id="t1" class="tree1" >
<li><a href="#">��ҳ</a></li>
<li><a href="#">��Ʒ����</a></li>
<li><a href="#">�������</a></li>
<li><a href="#">����֧��</a></li>
<li><a href="#">b�̹���</a></li>
<li><a href="#">jϵ����</a></li>
</ul> 
</div>

<div id="t2"></div>