以下实例可到：http://vietnam.1a.cn查看。网页右边的即为例子。
这个树型菜单本来是可以做成多级别的目录的，可我的小站没这么复杂，所以就没做了！


文件名mb_dh.cfm
------------------------------------------
<!--- 开始树型菜单JS 上部--->
<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="javascript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader" {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none" {
nested.style.display=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}

document.onclick=change

function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnvalue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'";
}
//-->
</script>
<!--- 结束树型菜单JS 上部--->
<!--- 查询数据库的母目录 --->
<cfquery name="rs_type" datasource="#REQUEST.Data#"><!---#REQUEST.Data#是数据库变量名称 --->
SELECT categoryid, category
FROM category
ORDER BY first desc, categoryorder asc</cfquery>

<!--- <link href="image/index3/emx_nav_left.css" rel="stylesheet" type="text/css"> --->
<!--- 这个CSS是DW自动生成的css模板 ，注释它是因为当前的页是被上级页包含的，而相关的代码，在上级页已经有了--->

<div id="pageNav">
<div id="sectionLinks"><br>
<cfloop query="rs_type"><!--- 循环母目录 --->
<cfset uaid="#rs_type.categoryid#"><!--- 母目录ID转换，这个变量是每循环一次都变动一次的。 --->
<cfset aid="#uaid#"><!--- 数据据集获取的目录 --->
<cfparam name="url.aid" default="0"><!--- 获取当前页的目录参数，以使相应的子菜单可以展开 --->
<cfparam name="ATTRIBUTES.lie" default="0"><!--- 排列方式：1.<li>列表，0.普通 --->
<cfparam name="ATTRIBUTES.target" default=""><!--- 连接窗口打开方式，弹出方式--->
<!--子目录 数据库开始读取 --->
<cfquery name="rs_dh" datasource="#REQUEST.Data#">
SELECT sortsid, sorts, categoryid
FROM sorts
WHERE categoryid = #aid#
ORDER BY first ASC, sortsorder desc
</cfquery>

<ul>
<li id="foldheader" onDblClick="MM_goToURL('parent','class.cfm?aid=<cfoutput>#aid#</cfoutput>');return

document.MM_returnvalue"><cfoutput>#rs_type.category#</cfoutput></li><!--- 双击则跳转到相关的页面 --->

<cfif uaid eq url.aid><!--- 判断当前页读取的目录变量是否和当前循环的目录一致，如果是的则展开目录，如果不是的则收起目录 --->
    <ul id="foldinglist">
    <cfelse>
<ul id="foldinglist" style="display:none"></cfif>
<!--- <ul id="foldinglist" style="display:none"> --->
<cfloop query="rs_dh">

<cfoutput>
<cfif ATTRIBUTES.lie eq 1><!--- 判断该使用哪种显示方式 --->
<li>
<a href="class.cfm?aid=#rs_dh.categoryid#&nid=#rs_dh.sortsid#" target="#ATTRIBUTES.target#">
#rs_dh.sorts#</a>
</li><!--- 该方法以列表方式显示 --->
<cfelse>
<a href="class.cfm?aid=#rs_dh.categoryid#&nid=#rs_dh.sortsid#" target="#ATTRIBUTES.target#">#rs_dh.sorts#</a>
</cfif></cfoutput><!--- 该方法以普通方式显示 --->
</cfloop>
    </ul>
</ul>

</cfloop>
</div>
</div>
<!--- 开始树型菜单JS 尾--->
<script language="javascript1.2">
<!--
/**
* Get cookie routine by Shelley Powers
* (shelley.powers@ne-dev.com)
*/
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = documents.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" "
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
}
}

if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}

function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist[i].style.display=='')
openones=openones + " " + i
}
documents.cookie=window.location.pathname+"="+openones
}

if (document.all)
document.body.onunload=check
//-->
</script>

<!--- 结束树型菜单JS 尾部--->