樹狀導覽功能表

怎樣才能實現一下效果呢？

樹狀導覽功能表的實現代碼：
<body bgcolor="#FFFFFF" text="#000000" >
<script language="JavaScript">
function show_div(menu)
 {
 var Imgname;
 if (document.all.item(menu).style.display == "none")
  {document.all.item(menu).style.display = "block";
  Imgname="images/Img"+menu+"_2.gif"
  document.all.item("Img"+menu).src=Imgname;
  }
 else
  {document.all.item(menu).style.display = "none";
  Imgname="images/Img"+menu+"_1.gif"
  document.all.item("Img"+menu).src=Imgname;
  }
 }
</script>
<img src="images/navigate.jpg" width="149" height="100">
<P>　<A Href="#" onClick="show_div('menu1')"><img name="Imgmenu1" src="images/Imgmenu1_1.gif" BORDER="0"
 ALIGN="ABSMIDDLE" width="39" height="16"><span class="l"><b>基礎資訊管理</b></span><br>
  </a>
<DIV ID="menu1" style="display:none">
 　<img src="images/open_1.gif" width="39" height="16">
<a href="#" class="l">客戶資訊管理</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">商品資訊管理</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">供應商資訊管理</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">商品資訊查詢</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">客戶資訊查詢</a><br>
  　<img src="images/open_2.gif" width="39" height="16">
  <a href="#" class="l">供應商資訊查詢</a><br>
<br>
</DIV>
<p>　<a href="#" onClick="show_div('menu2')"><img name="Imgmenu2" src="images/Imgmenu2_1.gif" BORDER="0"
 ALIGN="ABSMIDDLE" width="39" height="16"><span class="l"><b>採購管理</b></span></a>
  <br>
<DIV ID=menu2 STYLE="display:None">　<img src="images/open_1.gif" width="39"
 height="16"> <a href="#" class="l">商品採購</a><br>
  　<img src="images/open_2.gif" width="39" height="16">
<a href="#" class="l">採購查詢</a><br>
<br>
</DIV>
<p>　<A HREF="#" onClick="show_div('menu3')"><IMG name="Imgmenu3" SRC="images/Imgmenu3_1.gif" BORDER="0"
 ALIGN="ABSMIDDLE" width="39" height="16"><span class="l"><b>庫存管理</b></span></A>
  <br>
<DIV ID=menu3 STYLE="display:None">
 　<Img src="images/open_1.gif" width="39" height="16">
<a href="#" class="l">商品入庫</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">商品入庫退貨</a><br>
  　<img src="images/open_1.gif" width="39" height="16">
  <a href="#" class="l">庫存查詢</a><br>
  　<img src="images/open_2.gif" width="39" height="16">
  <a href="#" class="l">價格調整</a><br>
 <br>
</div></body>