一个多栏目菜单(图)

一个多栏目菜单
如图



代码如下:

<SCRIPT>...
    function getNames(obj,name,tij)
    ...{    
        var p = document.getElementById(obj);
        var plist = p.getElementsByTagName(tij);
        var rlist = new Array();
        for(i=0;i<plist.length;i++)
        ...{
            if(plist[i].getAttribute("name") == name)
            ...{
                rlist[rlist.length] = plist[i];
            }
        }
        return rlist;
    }

        function fod(obj,name)
        ...{
            var p = obj.parentNode.getElementsByTagName("td");
            var p1 = getNames(name,"f","div"); 
            for(i=0;i<p1.length;i++)
            ...{
                if(obj==p[i])
                ...{
                    p[i].className = "s";
                    p1[i].className = "dis";
                }
                else
                ...{
                    p[i].className = "";
                    p1[i].className = "undis";
                }
            }
        }
</SCRIPT>
<STYLE>...
TABLE {...}{
    FONT-SIZE: 12px; LINE-HEIGHT: 20px
}
.fod {...}{
    BORDER-TOP: #9ec9ec 1px solid; BACKGROUND: #d1e7fc; BORDER-LEFT: #9ec9ec 1px solid
}
.fod TD {...}{
    BORDER-RIGHT: #9ec9ec 1px solid; CURSOR: pointer; BORDER-BOTTOM: #9ec9ec 1px solid
}
.fod TD.s {...}{
    FONT-WEIGHT: bold; BACKGROUND: #ffffff; BORDER-BOTTOM: #ffffff 1px solid
}
.fodinfo {...}{
    BORDER-RIGHT: #9ec9ec 1px solid; BORDER-TOP: medium none; BORDER-LEFT: #9ec9ec 1px solid; BORDER-BOTTOM: #9ec9ec 1px solid
}
.dis {...}{
    DISPLAY: block
}
.undis {...}{
    DISPLAY: none
}
</STYLE>

<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    
    
    <TABLE class=mu6 cellSpacing=0 cellPadding=0 border=0>
      <TBODY>
        <TR vAlign=top>
          <TD height=72>
          
          <TABLE class=fod cellSpacing=0 cellPadding=0 width="100%" border=0>
                <TR align=middle>
                  <TD class=s onMouseOver="fod(this,'foda2')" width="25%">
                  <A class=l000 href="#">栏目1</A>
                  </TD>
                  <TD onMouseOver="fod(this,'foda2')" width="25%">
                  <A class=l000 href="#">栏目2</A>
                  </TD>
                  <TD onMouseOver="fod(this,'foda2')" width="25%">
                  <A class=l000 href="#">栏目3</A>
                  </TD>
                  <TD onMouseOver="fod(this,'foda2')" width="25%">
                  <A class=l000 href="#">栏目4</A>
                  </TD>
                </TR>
          </TABLE>
          
              <TABLE class=fodinfo height=73 cellSpacing=0 cellPadding=0 width="100%" border=0>
                <TBODY>
                  <TR>
                    <TD id=foda2>
                    
                    <DIV class=dis name="f" style="width:292px;">
                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                            <TR>
                              <TD width=67>
                               栏目1
                                </TD>
                            </TR>
                        </TABLE>
                    </DIV>
                    
                        <DIV class=undis name="f" style="width:292px;">
                           <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                            <TR>
                              <TD width=67>
                                栏目2
                                </TD>
                            </TR>
                        </TABLE>
                        </DIV>
                        
                      <DIV class=undis name="f" style="width:292px;">
                          <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                            <TR>
                              <TD width=67>
                                栏目3
                                </TD>
                            </TR>
                        </TABLE>
                      </DIV>
                      
                      <DIV class=undis name="f" style="width:292px;">
                           <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                            <TR>
                              <TD width=67>
                                栏目4
                                </TD>
                            </TR>
                        </TABLE>
                      </DIV>
                      
                      </TD>
                  </TR>
                </TBODY>
              </TABLE></TD>
        </TR>
      </TBODY>
    </TABLE>
    
    
    </td>
  </tr>
</table>