下面的是显示4个一级菜单的,还是上面的问题。3个菜单的已经可以正常显示了。
<HTML>
<HEAD>
<TITLE>菜单导航篇--分层菜单</TITLE>
</HEAD><BODY bgcolor="#fef4d2" ><br><br>
<center>
<h2>菜单导航篇--分层菜单</h2>
<hr width=300>
<br><!-- 案例代码1开始 --><script language=JavaScript><!-- [Step1]: 这里可以设置图形标志的名称 -->
var exImg=new Image(); exImg.src='picture001.jpg'
var unImg=new Image(); unImg.src='Picture002.jpg'
var stayFolded=falsefunction init(){
    oTop=new Array()
    oTop[0]=new makeMenu('divTop1','divCont')
    oTop[1]=new makeMenu('divTop2','divCont')
    oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
              
    oSub=new Array()
    oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
    oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
    oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
      
    for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
    for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}function makeMenu(obj,nest){
  nest=(!nest) ? '':'document.'+nest+'.'                                                         
  this.css = ((document.layers) ? 1:0) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') ;
  this.ref=((document.layers) ? 1:0) ? eval(nest+'document.'+obj+'.document'):eval('document');         
  this.height=(document.layers) ? 1:0?this.ref.height:eval(obj+'.offsetHeight')
  this.x=((document.layers) ? 1:0)? this.css.left:this.css.pixelLeft;
  this.y=((document.layers) ? 1:0)? this.css.top:this.css.pixelTop; 
  this.hideIt=b_hideIt;  this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt                
  return this
}function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}function menu(num){
  if(!stayFolded){
     for(i=0;i<oSub.length;i++){
         if(i!=num){
            oSub[i].hideIt()
            oTop[i].ref["imgA"+i].src=unImg.src
          }
     }
     for(i=1;i<oTop.length;i++){   oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)   }
   }
  if(oSub[num].vis()){
      oSub[num].showIt()
      oTop[num].ref["imgA"+num].src=exImg.src     }
  else{
      oSub[num].hideIt()
      oTop[num].ref["imgA"+num].src=unImg.src   }
  for(i=1;i<oTop.length;i++){ 
     if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
     else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)      }       
} onload=init;</script><!-- 案例代码1结束 --><!-- 案例代码2开始 --><style>
DIV.clTop{position:absolute; width:100}
DIV.clSub{position:absolute; left:7; width:140}
#divCont{position:relative; left:8; top:0; height:100; width:0;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
</style><div id="divCont">
<!-- [Step2]: 在此能够按序增加菜单的数目 -->
<!-- [Step3]: 这里可以更改图形标志的宽高 -->
<!-- [Step4]: 在此能够设置图形标志的边界框 -->
<!-- [Step5]: 这里可以更改菜单的名称 -->
   <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA0" width=12 height=12  border="1"> 分层菜单一</a><br>
<!-- [Step6]: 在此能够按序增加子菜单的数目 -->
      <div id="divSub1" class="clSub">
         <a href="#" class="clSubb" >-子菜单1</a><br>
         <a href="#" class="clSubb" >-子菜单2</a><br>
      </div>
   </div>
   <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA1" width=12 height=12  border="1"> 分层菜单二</a><br>
      <div id="divSub2" class="clSub">
          <a href="#" class="clSubb" >-子菜单1</a><br>
          <a href="#" class="clSubb" >-子菜单2</a><br>
         <a href="#" class="clSubb" >-子菜单3</a><br>
      </div>
   </div>
   <div id="divTop3" class="clTop"><a href="" onclick="menu(2); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()"><img src="Picture001.jpg" name="imgA2" width=12 height=12  border="1"> 分层菜单三</a><br>
       <div id="divSub3" class="clSub">
         <a href="#" class="clSubb" >-子菜单1</a><br>
         <a href="#" class="clSubb" >-子菜单2</a><br>
        </div>
     </div>
 <div id="divTop4" class="clTop"><a href="#" onclick="menu(3); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA0" width=12 height=12  border="1"> 分层菜单4</a><br>
<!-- [Step6]: 在此能够按序增加子菜单的数目 -->
      <div id="divSub4" class="clSub">
         <a href="#" class="clSubb" >-子菜单1</a><br>
         <a href="#" class="clSubb" >-子菜单2</a><br>
      </div>
   </div>
</div><!-- 案例代码2结束 -->
</BODY></HTML>