如何才能实现左边导航条菜单的样子？（www.csdn.net 左边的）

如果我的数组里a[0][0]="数据库开发“
a[0][1]="MS-SQL"
a[0][2]="oracle"
a[1][0]="web"
a[1][1]="asp"
a[1][2]="php"
怎么实现导航条？谢谢！
---------------------------------------------------------------

 1<body>
 2<script>   
 3var a=new Array()   
 4a[0]=new Array()   
 5a[1]=new Array()   
 6a[0][0]="数据库开发"   
 7a[0][1]="MS-SQL"   
 8a[0][2]="oracle"   
 9a[1][0]="web"   
10a[1][1]="asp"   
11a[1][2]="php"   
12for(i=0;i<a.length;i++){   
13document.write("<span onclick='expd("+i+")' style='cursor:hand'>"+a[i][0]+"</span><br><span id='menu"+i+"' style='display:none'>")   
14for(j=1;j<a[i].length;j++){   
15document.write(a[i][j]+'<br>')   
16}   
17document.write("</span></span><br>")   
18}   
19function expd(n){   
20eval("menu"+n).style.display=eval("menu"+n).style.display==''?'none':''   
21}   
22</script>
23</body>

---------------------------------------------------------------

哦，用这个试试

1<style type="text/css">   
2<!--定义一个美化界面的样式-->   
3<!--   
4.better{ color:#3366FF;font-size:9pt;text-decoration: none}   
5\-->   
6</style>

 1<script language="JavaScript">   
 2<!--   
 3function showLay(divId){   
 4var objDiv = eval(divId);//eval()为计算一个表达式的值并返回结果   
 5if (objDiv.style.display=="none")   
 6{   
 7eval("sp"+divId+".innerHTML='-'");   
 8objDiv.style.display="";   
 9}   
10else   
11{   
12eval("sp"+divId+".innerHTML='+'");   
13objDiv.style.display="none";   
14}   
15}   
16// -->   
17</script>

1<a href="#" onclick="showLay('Layer2')"><font class="better"><span id="spLayer2">+</span>数据库</font></a>

1<div id="Layer2" style="display:none;">
2<font class="better">  &amp;nbsp-MS-SQL</font><br/>
3<font class="better">  &amp;nbsp-Oracle</font><br/></div>