怎样才能实现一下效果呢？如图：
树状导航菜单的实现代码：
<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>