ツリーメニューのサンプル

7カテゴリ×３アイテム。
開閉状態に合わせてモード（３角の矢印の向き）を切り替え。

▼ Related Links

ヘッダ情報（<head> 〜 </head>の間）に、
以下のスクリプトを追記。 

<script Language="JavaScript"><!--
//open or close
function extblock(trname){
var trmenu = document.getElementById(trname).style;
if(trmenu.display == 'none'){
trmenu.display = "block";
}else{
trmenu.display = "none";
}
}
//mode
function arrow(mdname){
var up = "▲";
var down = "▼";
var mode = document.getElementById(mdname);
if(mode.firstChild.nodeValue == down){
mode.firstChild.nodeValue = up;
//mode.innerHTML = up;
}else{
mode.firstChild.nodeValue = down;
//mode.innerHTML = down;
}
}
//--></script>

さらに、bodyタグ内に、以下の内容を追記。 

<div>
<a href="Javascript:extblock('trmenu0');arrow('mode0')" id="mode0">▼</a> Related Links<br />
<div id="trmenu0" style="display:none">
├<a href="Javascript:extblock('trmenu1');arrow('mode1')" id="mode1">▼</a> category1<br />
  <div id="trmenu1" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
├<a href="Javascript:extblock('trmenu2');arrow('mode2')" id="mode2">▼</a> category2<br />
  <div id="trmenu2" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
├<a href="Javascript:extblock('trmenu3');arrow('mode3')" id="mode3">▼</a> category3<br />
  <div id="trmenu3" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
├<a href="Javascript:extblock('trmenu4');arrow('mode4')" id="mode4">▼</a> category4<br />
  <div id="trmenu4" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
├<a href="Javascript:extblock('trmenu5');arrow('mode5')" id="mode5">▼</a> category5<br />
  <div id="trmenu5" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
├<a href="Javascript:extblock('trmenu6');arrow('mode6')" id="mode6">▼</a> category6<br />
  <div id="trmenu6" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
└<a href="Javascript:extblock('trmenu7');arrow('mode7')" id="mode7">▼</a> category7<br />
  <div id="trmenu7" style="display:none">
&nbsp; &nbsp;├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
&nbsp; &nbsp;├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
&nbsp; &nbsp;└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
  </div>
</div>
</div>

ちなみに、サンプルは、以下のcssをdivタグに適用したもの。 

.tree a {
	text-decoration: none;
	}

.tree a:link {
	color: #CC99FF;
	}

.tree a:visited {
	color: #CCCCFF;
	}

.tree a:active {
	color: #CCCCFF;
	}

.tree a:hover {
	color: #CCCCFF;
	}

.tree {
	color: #666666;
	font-family: Arial, Verdana, sans-serif;
	font-size: 10px;
	text-align: left;
	line-height: 150%;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: 50px;
	}