急求一个网站左边菜单的算法，大家都帮我想想办法吧

http://www.kaoten.com.tw/protxt.php3
类似左边这种菜单，虽然一看显然不可能是动态的，但上头强要这种也要做成动态的。
现在因这个头痛不已，也不知道怎么办才好。
他这种算法就是层，然后javascript控制隐藏什么的，但是如果是动态的话，什么位置显示就非常难搞定了，谁有好点的算法，帮帮小弟吧

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script>
function list(url,target,txt)
{document.write("<tr><td height=\"18\"><img src=\"images/line.gif\" width=\"13\" height=\"18\" align=\"absmiddle\"><img src=\"images/icon-page.gif\" width=\"16\" height=\"15\" align=\"absmiddle\" hspace=\"2\"><a href="+url+" target="+target+">"+txt+"</a></td></tr>")}
function t(txt)
{document.write("<tr><td width=\"35\"><img src=\"images/icon-folder1-close.gif\" width=\"15\" height=\"13\"><img src=\"images/icon-folder-close.gif\" width=\"16\" height=\"15\" align=\"absmiddle\"></td><td>"+txt+"</td></tr>")}
var w=200;
function closenavi() {
w-=10;
if (w>-10) {window.parent.testframeset.cols = ''+w+',*';repeat=setTimeout("closenavi()",10);}
else {clearTimeout(repeat);w=200;}
}function initIt(){
        divCount = document.all.tags("DIV");
        for (i=0; i<divCount.length; i++) {
            obj = divCount(i);
            if (obj.className == "child" || obj.className == "child1") obj.style.display = "none";
        }
}function expandIt(el) {        obj = eval("page" + el);
        obj2 = eval("main" + el);
        if (obj.style.display == "none") {
            obj.style.display = "block";
obj2.all.tags('img')[0].src='images/icon-folder1-open.gif';
obj2.all.tags('img')[1].src='images/icon-folder-open.gif';
        }
        else {
            obj.style.display = "none";
obj2.all.tags('img')[0].src='images/icon-folder1-close.gif';
obj2.all.tags('img')[1].src='images/icon-folder-close.gif';
        }}onload = initIt;var judge=0;
function expandall(o) {
if (judge==0) {divCount2 = document.all.tags("DIV");
        for (i=0; i<divCount2.length; i++) {
            obj2 = divCount2(i);
            if (obj2.className == "child" || obj.className == "child1" || obj2.style.display == "none")
{obj2.style.display = "block";}
if (obj2.className == "menu")
{obj2.all.tags('img')[0].src='images/icon-folder1-open.gif';
            obj2.all.tags('img')[1].src='images/icon-folder-open.gif';
            }
}judge=1;
o.src='images/icon-closeall.gif';
o.alt='全部折叠';
}
else {divCount2 = document.all.tags("DIV");
        for (i=0; i<divCount2.length; i++) {
            obj2 = divCount2(i);
            if (obj2.className == "child" || obj.className == "child1" || obj2.style.display == "block")
{obj2.style.display = "none";}
if (obj2.className == "menu")
{obj2.all.tags('img')[0].src='images/icon-folder1-close.gif';
            obj2.all.tags('img')[1].src='images/icon-folder-close.gif';
            }
}judge=0;
o.src='images/icon-expandall.gif';
o.alt='全部展开';
}
}
</script>
<html>
<script language=javascript>
function cwin()
{if(parent.testframeset.cols!='200,*')
{parent.testframeset.cols='200,*';
}
else{parent.testframeset.cols='-10,*';
}}
function closenavi() {
w-=10;
if (w>-10) {window.parent.testframeset.cols = ''+w+',*';repeat=setTimeout("closenavi()",100);}
else {clearTimeout(repeat);w=200;}
}
</script>
<head>
<title>dir</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>

</style>
<link rel="stylesheet" href="images/test.css" type="text/css">
<script Language="javascript" src="images/js.js"></script>
<base target="main">
</head><body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" scroll=no onkeydown="if(event.keyCode=='39') cwin();">
<table id=control width="100%" border="0" cellspacing="0" cellpadding="0" class="borderon">
<tr>
<td height="20" style="padding-top:3px"><nobr> 个人脚本收藏</nobr></td>
<td width="20" align="center" valign="top"><img src="images/icon-expandall.gif" width="16" height="15" class="button" onclick="expandall(this)" vspace="2" alt="全部展开"></td>
<td width="20" align="center" valign="top"><img src="images/icon-close.gif" width="16" height="15" class="button" onClick="cwin()" vspace="2" alt="关闭左栏"></td>
</tr>
</table><div id="navi" style="position:relative; width:100%; height:expression(body.offsetHeight-control.offsetHeight-2); z-index:1; left: 0px; top: 0px; overflow: auto">
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="12"><img src="images/spacer.gif" width="12" height="12"></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top">
<div id="main1" class="menu" onClick="expandIt('1'); return false"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<script>t("小游戏")</script>
</table>
</div>
<div id="page1" class="child" style="padding-left:15px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<script>
list("htm/game/wz/default.htm","_blank","五子棋(js)");
list("htm/game/wzq/game.htm","_blank","五子棋(applet)");
list("htm/game/winmine.htm","_blank","扫雷");
list("htm/p03.htm","_blank","超级马力");
list("htm/game/fk.htm","_blank","俄罗期方块");
list("htm/game/pingball.htm","_blank","乒乓球");
list("htm/game/game.htm","main","推箱子");
list("htm/game/cat.exe","","小猫");
list("baoku/0115.htm","","模拟抽奖");
</script>
</table>
</div>
<div id="main2" class="menu" onClick="expandIt('2'); return false"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<script>t("Applet")</script>
</table>
</div>
<div id="page2" class="child" style="padding-left:15px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<script>
list("htm/applet/fire/yanhua.htm","","礼花");
list("htm/applet/app.htm","","人体模特");
list("htm/applet/clock/clock2.htm","","java时钟");
list("htm/applet/menu/dissolvemenu.htm","","applet菜单");
list("htm/applet/txt/txt.htm","","魔鬼文字");
</script>
</table>
</div>
<div id="main3" class="menu" onClick="expandIt('3'); return false"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<script>t("链接类")</script>
</table>
</div>
</body>
</html>
css:
body {  margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 12px; border-color: #808080 #FFFFFF #FFFFFF #808080; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.borderoff { font-size: 12px; border-color: #808080 #FFFFFF #FFFFFF #808080; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: menu}
.borderon { font-size: 12px; border-color: #FFFFFF #808080 #808080 #FFFFFF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: menu}
.button { border:1px solid #D4D0C8; behavior:url(images/test.htc);cursor:default;}
td {  font-size: 12px}
a {  color: #000000; text-decoration: none}
a:hover {  color: #000000; text-decoration: none}
.menu { border:1px solid #FFFFFF; height:20px; padding-top:3px; padding-left:3px; cursor:hand;behavior:url(images/menu.htc)}
.child { border:1px solid #FFFFFF; height:20px; padding-top:3px; padding-left:3px;display:none}
.shadow {filter: DropShadow(Color=#999999, OffX=2, OffY=2, Positive=1); position:relative; top:-1px; left:-1px;}
.borderall   { border: 1px solid #F27900 }
.tden { font-size: 9px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif" ; font-weight: normal}