请问怎样做多级树形菜单啊（大概要有五层）？可否给提供一两个摸板？

狐狸的树
三个文件，自己看着分别存。xml,xsl,htm<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet type="text/xsl" href="tree.xsl" ?>
<tree>
<node title="中国">
<node title="江苏">
<node title="泰州">
<node title="白马" />
</node>
<node title="徐州" />
<node title="南京" />
<node title="无锡" />
</node>
<node title="上海">
<node title="徐家汇" />
<node title="莘庄" />
<node title="中山公园" />
</node>
<node title="北京" />
<node title="四川" />
<node title="海南" />
</node>
<node title="米国">
<node title="加利福利亚" />
<node title="纽约" />
</node>
<node title="伊拉克" />
</tree>
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
 
<xsl:template match="node">
<div>
<span onclick="toggle(this)" class="">
<xsl:choose>
<xsl:when test="count(*)>0">
─</xsl:when>
<xsl:otherwise>
 ·</xsl:otherwise>
</xsl:choose>
</span>
<span>
<xsl:value-of select="@title" />
</span>
</div>
<div class="indent">
<xsl:apply-templates select="./node" />
</div>
</xsl:template>
</xsl:stylesheet><style>
body
{
background-color: #eeeeee;
font-size:14;
}
div
{  
cursor:hand;
}
div.indent
{
padding-left: 30;}span
{
border:1px solid;
border-color:#999999;
font-size:14;
height:18;
}
span.
{
width:15;
height:15;
text-align:center;
border:1px solid;
border-color:#999999;
font-size:10;
background-color:white;
 
}
</style><SCRIPT  >
 
function toggle(s)
{
var d = s.parentElement.nextSibling;
if (d.childNodes.length > 0)
{
if (d.style.display == '')
{
d.style.display = 'none';
s.innerText = '┼';
}
else
{
d.style.display = '';
s.innerText = '─';
}
}
}function document.onselectstart()
{
document.selection.clear();
}var xmldoc, xsldoc;
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("tree.xml");
xsldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xsldoc.load("tree.xsl");document.write('<div id="tree">' + xmldoc.transformNode(xsldoc) + '</div>');
 
</SCRIPT>