一个多栏目菜单(图)

一个多栏目菜单
如图



代码如下:

< 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 >