怎么做出这效果

<html><head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
A:active { TEXT-DECORATION: none}
A:visited { TEXT-DECORATION: none}
A:hover { COLOR: #FF0000;TEXT-DECORATION: none}
A:link { TEXT-DECORATION: none}
body {  FONT-FAMILY: "MS Shell Dlg", "Tahoma", "sans-serif"; font-size: 10pt; COLOR: 000000; ; text-decoration: none}
tr {  FONT-FAMILY: MS Shell Dlg, Tahoma,sans-serif; font-size: 10pt; }
td { FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: normal}
form    {FONT-FAMILY: MS Shell Dlg,tahoma,宋体; FONT-SIZE: 10pt}
.black {  color: #000000; font-size: 10pt; }
.white {  color: #ffffff; font-size: 9pt; }
.red {  color: #ff0000; font-size: 9pt; }
.green {  color: #009900; font-size: 9pt; }
.c990000 {  color: #990000; font-size: 9pt; }
.cFF9900 {  color: #FF9900; font-size: 9pt; }
.c333399 {  color: #333399; font-size: 9pt; }
.blue {  color: #0000FF; font-size: 9pt; }
.blue1 {  color: #3300cc; font-size: 9pt; }
.gray {  color: #666666; font-size: 9pt; }
.row {line-height: 15pt}
.bottom { BACKGROUND-COLOR: #CCCCCC; BORDER-BOTTOM: #665b8e 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-RIGHT: #665b8e 1px solid; BORDER-TOP: #ffffff 1px solid; COLOR: #000000; FONT-FAMILY: "宋体"; HEIGHT: 18px; font-size: 10pt}
.editbox1 { BACKGROUND-COLOR: #DBDBDB; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; font-size: 10pt}
.editbox3 { BACKGROUND-COLOR: #FFFFFF; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; font-size: 10pt}
.editbox2 { COLOR: #000000; CURSOR: text; FONT-SIZE: 10pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; background-color: #DBDBDB; FONT-FAMILY: 宋体}
.size {  font-size: 9px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"}
A.yellow:active { TEXT-DECORATION: none; color: #FFFFFF}
A.yellow:visited { TEXT-DECORATION: none; color: #FFFFFF}
A.yellow:link { COLOR:ffffff;TEXT-DECORATION: none}
A.yellow:hover {COLOR: #FFff33; TEXT-DECORATION: none}
</style>

解决方案 »

  1.   

    <script language=JavaScript1.2>
    scores = new Array(20);
    var numTotal=0;
    NS4 = (document.layers) ? 1 : 0;
    IE4 = (document.all) ? 1 : 0;
    ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {
        with (document) {
            write("<STYLE TYPE='text/css'>");
            if (NS4) {
                write(".parent {position:absolute; visibility:visible}");
                write(".child {position:absolute; visibility:visible}");
                write(".regular {position:absolute; visibility:visible}")
            }
            else {
                write(".child {display:none}")
            }
            write("</STYLE>");
        }
    }function getIndex(el) {
        ind = null;
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id == el) {
                ind = i;
                break;
            }
        }
        return ind;
    }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";
            }
        }
    }function expandIt(el) {
    if (!ver4) return;
        if (IE4) {
            whichEl1 = eval(el + "Child");
    for(i=1;i<=numTotal;i++){
    whichEl = eval(scores[i] + "Child");
    if(whichEl!=whichEl1) {
    whichEl.style.display = "none";
    }
    }
            whichEl1 = eval(el + "Child");
            if (whichEl1.style.display == "none") {
                whichEl1.style.display = "block";
            }
            else {
                whichEl1.style.display = "none";
            }
        }
        else {
            whichEl = eval("document." + el + "Child");
    for(i=1;i<=numTotal;i++){
    whichEl = eval("document." + scores[i] + "Child");
    if(whichEl!=whichEl1) {
    whichEl.visibility = "hide";
    }
    }
            if (whichEl.visibility == "hide") {
                whichEl.visibility = "show";
            }
            else {
                whichEl.visibility = "hide";
            }
            arrange();
        }
    }
    onload = initIt;
    </script>
      

  2.   

    CSDN 论坛首页的 左边 不就是？
      

  3.   

    </head>
    <body oncontextmenu=self.event.returnValue=false>
    <table cellspacing=0 cellpadding=0 width=120 border=0>
    <tbody><tr><td><div id=KB1Parent><a onClick="expandIt('KB1'); return false" href="#" class=black>
     aaa</a></div>
    <div class=child id=KB1Child>a1<br>
    a2<br></div><div id=KB2Parent><a onClick="expandIt('KB2'); return false" href="#" class=black>
    bbbb</a></div>
    <div class=child id=KB2Child>b1<br>
    b2<br>
    b3</div><div  id=KB3Parent><a onClick="expandIt('KB3'); return false" href="#" class=black>
      ccc</a></div>
    <div class=child id=KB3Child>c1<br>
    c2<br></div>
    <script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';</script>
              </td>
            </tr>
            </tbody> 
          </table>
    </body></html>
      

  4.   

    增加一个层
    这里就要加一个
    <script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';</script>
    比如要4个层：
    <div  id=KB4Parent><a onClick="expandIt('KB4'); return false" href="#" class=black>
      ddd</a></div>
    <div class=child id=KB4Child>d1<br/>
    d2<br/></div><script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';scores[4]='KB4';</script>