如何实现csdn一样的导航

<HTML><head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
<link rel="stylesheet" href="css\lanbao.css" type="text/css">
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript src=check.js>
<!--function KB9Parent_onmouseover() {}//-->
</SCRIPT>
</HEAD><BODY  name="menu">
<SCRIPT LANGUAGE=javascript>
<!--
document.onmousedown =Click;
//-->
</SCRIPT><TABLE WIDTH="120" style="HEIGHT: 61px; WIDTH: 111px">
<tr >
<td class="pgtitle" align="left" >兰宝集团</td>
<tr height=20></tr>
</TABLE>
<SCRIPT LANGUAGE=javascript>
<!--
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
/*function expandIt(el,index) {
    menu(index); 
    if (!ver4) return;
    if (IE4) {
        whichEl = eval(el + "Child");
        if (whichEl.style.display == "none") {
            whichEl.style.display = "block";
        }
        else {
            whichEl.style.display = "none";
        }
    }
    else {
        whichEl = eval("document." + el + "Child");
        if (whichEl.visibility == "hide") {
            whichEl.visibility = "show";
        }
        else {
            whichEl.visibility = "hide";
        }
        arrange();
    }
}*/function expandIt(index){
var menuitem=new Array()
menuitem[1]=KB9Child
menuitem[2]=KB1Child
menuitem[3]=KB2Child
menuitem[4]=KB3Child
menuitem[5]=KB4Child
menuitem[6]=KB5Child
if (menuitem[index].style.display=="block"){
displayall()
}
else {
displayall()
menuitem[index].style.display="block"
}
}function displayall(){KB9Child.style .display ="none"
KB1Child.style .display ="none"
KB2Child.style .display ="none"
KB3Child.style .display ="none"
KB4Child.style .display ="none"
KB5Child.style .display ="none"
}
function arrange() {
    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.visibility != "hide") {
            whichEl.pageY = nextY;
            nextY += whichEl.document.height;
        }
    }
}
function initIt(){
    if (!ver4) return;
    if (NS4) {
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
      }
        arrange();
    }
    else {
        divColl = document.all.tags("DIV");
        for (i=0; i<divColl.length; i++) {
            whichEl = divColl(i);
            if (whichEl.className == "child") whichEl.style.display = "none";
        }
    }
}
onload = initIt;
//-->
</SCRIPT><table border=0 width="120">
<DIV ><A href="#" onclick="expandIt(1); return false"><font color=Black size=4>●设&nbsp;&nbsp;置</font></A>
  </DIV>
<div id="KB9Child" class="child">
&nbsp;&nbsp;<A href="midright.asp" target=right>客&nbsp;&nbsp;户</A><BR>
&nbsp;&nbsp;<A href="midright1.asp" target=right>存&nbsp;&nbsp;货</A><BR>
&nbsp;&nbsp;<A href="midright2.asp" target=right>供&nbsp;应&nbsp;商</A><BR>
&nbsp;&nbsp;<A href="userright.asp" target=right>设置用户权限</A><BR>
&nbsp;&nbsp;<A href="dptmaintain.asp" target=right>部门维护</A></div><DIV><A href="#" onclick="expandIt(2); return false"><font color=black size=4>●单&nbsp;&nbsp;据</font></A>
</DIV>
<div id="KB1Child" class="child">
&nbsp;&nbsp;<A href="produceplan.asp" target=right>生产计划(总)</A><BR>
&nbsp;&nbsp;<A href="colligatequery.asp" target=right>综合查询</A></div><DIV id=d3><A href="#" onclick="expandIt(3); return false"><font color=black size=4>●销售管理</font></A>
</DIV>
<div id="KB2Child" class="child">
&nbsp;&nbsp;<A href="shopcompact.asp" target=right>销售合同录入</A><BR>
&nbsp;&nbsp;<A href="shopcompactquery.asp" target=right>销售合同查询</A><BR>
&nbsp;&nbsp;<A href="guestlink.asp" target=right>客户联系表</A><BR>
&nbsp;&nbsp;<A href="shopdo.asp" target=right>销售处理</A></div><DIV ><A href="#" onclick="expandIt(4); return false"><font color=black size=4>●采购管理</font></A>
  </DIV>
<div id="KB3Child" class="child">
&nbsp;&nbsp;<A href="buyplan.asp" target=right>采购计划</A><BR>
&nbsp;&nbsp;<A href="buycompact.asp" target=right>采购合同录入</A><BR>
&nbsp;&nbsp;<A href="buycompactquery.asp" target=right>采购合同查询</A><BR>
&nbsp;&nbsp;<A href="providertable.asp" target=right>供应商联系表</A></div><DIV ><A href="#" onclick="expandIt(5); return false"><font color=black size=4>●库存管理</font></A>
  </DIV>
<div id="KB4Child" class="child">
&nbsp;&nbsp;<A href="stockinput.asp" target=right>原材料入库</A><BR>
&nbsp;&nbsp;<A href="productinputjudge.asp" target=right>成品入库</A><BR>
&nbsp;&nbsp;<A href="stockquery.asp" target=right>物品明细查询</A><BR>
&nbsp;&nbsp;<A href="stockproductcount.asp" target=right>物品数量查询</A><BR>
&nbsp;&nbsp;<A href="stockoutjudge.asp" target=right>物品出库</A><BR>
&nbsp;&nbsp;<A href="stockmove.asp" target=right>移库操作</A></div><DIV><A href="#" onclick="expandIt(6); return false"><font color=black size=4>●其&nbsp;&nbsp;它</font></A>
</DIV>
<div id="KB5Child" class="child">
&nbsp;&nbsp;<A href="editpass.asp" target=right>更改密码</A><BR>
&nbsp;&nbsp;<A href="messegeboard.htm" target=right>留言板</A><BR>
&nbsp;&nbsp;<A href="help.htm" target=right>帮&nbsp;&nbsp;助</A><BR>
&nbsp;&nbsp;<A href="out.asp" target=_top>退&nbsp;&nbsp;出</A></div>              
</table> 
                
</BODY>