烦请高手帮忙看看，这个效果该如何实现？？谢谢了。。。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<body onLoad="MFXinitMenu()" bgcolor=#ff0000 >
<table width="400" border="0" cellspacing="0" cellpadding="0" height="300">
  <tr>
    <td><DIV id="MFX0" style="position:absolute; width:150px; height:25px; z-index:2; left:200px; top: 50px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td  colspan=3 background="title_o.gif" height="25"  class="c215DC6"  onClick="MFXrunMenu(0,5)">网络配置中心</td>
    </tr>
  </table>
</DIV><div id="MFX1" style="position:absolute; width:150px; height:126px; z-index:1; left:200px; top: 75px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="1" bgcolor="FFFFFF"></td>
      <td width="154" bgcolor="D6DFF7" height="125" align="center">
       内容
      </td>
      <td width="1" bgcolor="FFFFFF"></td>
    </tr>
    <tr bgcolor="FFFFFF">
      <td colspan="3" height="1"></td>
    </tr>
  </table>
</div><div id="MFX2" style="position:absolute; width:150px; height:38px; z-index:2; left:200px; top: 201px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="13" colspan="3"> </td>
    </tr>
    <tr>
      <td colspan=3 background="title_o.gif" height="25" class="c215DC6"  onClick="MFXrunMenu(2,5)">安全配置中心</td>    </tr>
  </table>
</div>
      <DIV id="MFX3" style="position:absolute; width:150px; height:106px; z-index:1; left:200px; top: 226px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="1" bgcolor="FFFFFF"></td>
      <td width="154" bgcolor="D6DFF7" height="105" align="center">
        内容
      </td>
      <td width="1" bgcolor="FFFFFF"></td>
    </tr>
    <tr bgcolor="FFFFFF">
      <td colspan="3" height="1"></td>
    </tr>
  </table>

</DIV>
<DIV id="MFX4" style="position:absolute; width:150px; height:38px; z-index:2; left:200px; top: 302px; visibility: hidden">
  <table width="156" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="13" colspan="3"> </td>
    </tr>
    <tr>
      <td colspan=3 background="title_o.gif" height="25" onClick="MFXrunMenu(4,5)">系统报告中心</td>
    </tr>
  </table>
</DIV><DIV id="MFX5" style="position:absolute; width:150px; height:106px; z-index:1; left:200px; top: 357px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="1" bgcolor="FFFFFF"></td>
      <td width="154" bgcolor="D6DFF7" height="106" align="center">
      内容
      </td>
      <td width="1" bgcolor="FFFFFF"></td>
    </tr>
    <tr bgcolor="FFFFFF">
      <td colspan="3" height="1"></td>
    </tr>
  </table>

</DIV>
      <DIV id="MFX6" style="position:absolute; width:150px; height:38px; z-index:2; left:20px; top: 463px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="13" colspan="3"> </td>
    </tr>
    <tr>
      <td colspan=3 background="title_o.gif" height="25" onClick="MFXrunMenu(6,5)">高级配置中心</td>
    </tr>
  </table>
</DIV>
      <DIV id="MFX7" style="position:absolute; width:150px; height:116px; z-index:1; left:200px; top: 488px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="1" bgcolor="FFFFFF"></td>
      <td width="154" bgcolor="D6DFF7" height="150" align="center">
      neirong
      </td>
      <td width="1" bgcolor="FFFFFF"></td>
    </tr>
    <tr bgcolor="FFFFFF">
      <td colspan="3" height="1"></td>
    </tr>
  </table>
</DIV>
      <DIV id="MFX8" style="position:absolute; width:150px; height:38px; z-index:2; left:20px; top: 463px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="13" colspan="3"> </td>
    </tr>
    <tr>
      <td colspan=3 background="title_o.gif" height="25" onClick="MFXrunMenu(8,5)">高级配置中心</td>
    </tr>
  </table>
</DIV>
      <DIV id="MFX9" style="position:absolute; width:150px; height:116px; z-index:1; left:200px; top: 488px; visibility: hidden">
        <table width="156" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="1" bgcolor="FFFFFF"></td>
      <td width="154" bgcolor="D6DFF7" height="150" align="center">
      neirong
      </td>
      <td width="1" bgcolor="FFFFFF"></td>
    </tr>
    <tr bgcolor="FFFFFF">
      <td colspan="3" height="1"></td>
    </tr>
  </table>
</DIV>
    </td>
  </tr>
</table>
to:elyesse(ely) 谢谢你的建议。我之所以贴这么多，是因为这些代码拷贝下来后就可以直接运行，这样可以减免很多不必要的麻烦。
To bzscs(沙虫) 我不太明白你的意思。我只知道Alpha滤镜可以做到这样的效果，但是面对那么多脚本，不知道该加到哪儿去。
怎么？没高手了？？？这个问题是太简单还是太难？怎么发了就跟没发一样没几个人来看看啊？CSDN是怎么了？
<script language="JavaScript">
<!--
function MFXinitMenu(){
   IE = document.all ? 1:0;
   NN = document.layers ? 1:0;
   HIDDEN = (NN) ? 'hide' : 'hidden';
   VISIBLE = (NN) ? 'show' : 'visible';
   myLayer=new Array();
   mySpeed=5;
   subLeft=0;
   closes=true;
   myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;
   myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;
   myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;
   myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;
   myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;
   myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;
   myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;
   myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;
   myLayer[8]=(NN) ? document.MFX8 : document.all.MFX8.style;
   myLayer[9]=(NN) ? document.MFX9 : document.all.MFX9.style;
   running=false;
   whichOpen=-1;
   lastMain=myLayer.length-2;
   MFXmain=new Array();
   for(i=0; i<myLayer.length; i++){
      mainORsub= i % 2;
      MFXmain[i] = mainORsub ? 0:1;
   }
   myTop=new Array();
   myLeft=new Array();
   myHeight=new Array();
   myWidth=new Array();
   mySlide=new Array();
   for(i=0; i<myLayer.length; i++){
      if(NN&&MFXmain[i]){
         if(i==0){
            myTop[i]=myLayer[i].top;
            myLeft[i]=myLayer[i].left;
         }
         else{
            myLeft[i]=myLeft[i-2];
            myTop[i]=myTop[i-2]+myHeight[i-2];
         }
         myHeight[i]=myLayer[i].clip.height;
         myWidth[i]=myLayer[i].clip.width;
         myLayer[i].left=myLeft[i];
         myLayer[i].top=myTop[i];
         myLayer[i].visibility=VISIBLE;
      }
      if(NN&&!MFXmain[i]){
         myTop[i]=myTop[i-1]+myHeight[i-1];
         myLeft[i]=myLeft[i-1];
         myHeight[i]=myLayer[i].clip.height;
         myWidth[i]=myLayer[i].clip.width;
         mySlide[i]=myTop[i]+myHeight[i];
         myLayer[i].left=myLeft[i]+subLeft;
         myLayer[i].top=myTop[i];
      }
      if(IE&&MFXmain[i]){
         if(i==0){
            myLeft[i]=myLayer[i].pixelLeft;
            myTop[i]=myLayer[i].pixelTop;
         }
         else{
            myLeft[i]=myLeft[i-2];
            myTop[i]=myTop[i-2]+myHeight[i-2];
         }
         myHeight[i]=myLayer[i].pixelHeight;
         myWidth[i]=myLayer[i].pixelWidth;
         myLayer[i].left=myLeft[i];
         myLayer[i].top=myTop[i];
         myLayer[i].visibility=VISIBLE;
      }
      if(IE&&!MFXmain[i]){
         myTop[i]=myTop[i-1]+myHeight[i-1];
         myLeft[i]=myLeft[i-1];
         myHeight[i]=myLayer[i].pixelHeight;
         myWidth[i]=myLayer[i].pixelWidth;
         myLayer[i].pixelLeft=myLeft[i]+subLeft;
         myLayer[i].pixelTop=myTop[i];
         mySlide[i]=myTop[i]+myHeight[i];
      }
   }
}
var MFxa=100;
function MFXrunMenu(myName,newspeed){
   ieStep=0;
   thereS=false;
   thereC=false;
   if(newspeed>0){mySpeed=newspeed;}
   first=myName;
   if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
      running=true;
      if(NN){
         myLayer[myName+1].clip.height=0;
         myLayer[myName+1].visibility=VISIBLE;
      }
      if(IE){
         myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
         myLayer[myName+1].visibility=VISIBLE;
      }
      MFxa=100;
      MFXopenMenuS(myName);
      MFXopenMenuC(myName);
   }
   if(whichOpen>=0&&!running&&!(whichOpen==myName)){
      running=true;
      second=whichOpen;
      ieStep1=myHeight[second+1];
      thereCS=false;
      thereCC=false;
      MFXcloseMenuS(second);
      MFXcloseMenuC(second);
   }
   if(whichOpen>=0&&!running&&whichOpen==myName&&closes){
      running=true;
      second=whichOpen;
      ieStep1=myHeight[second+1];
      thereCS=false;
      thereCC=false;
      MFXcloseMenuS(second);
      MFXcloseMenuC(second);
   }
}
function MFXstopCloseS(myName){
   running=false;
   thereCS=true;
   if(closes&&first==whichOpen){whichOpen=-1;}
   else{whichOpen=-1;
      MFXrunMenu(first);
   }
}
function MFXstopOpenS(myName){
   running=false;
   thereS=true;
   if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
      whichOpen=myName;
}
function MFXopenMenuS(myName){
   myStep=mySpeed;
   if(NN&&!thereS&&!(first==lastMain)){
      if(myLayer[first+2].top+myStep>mySlide[first+1]){
         myStep=mySlide[first+1]-myLayer[first+2].top;
      }
      for(i=first+2; i<myLayer.length; i+=2){
         myLayer[i].top+=myStep;
      }
         if(myLayer[first+2].top==mySlide[first+1]){
            MFXstopOpenS(first)
         }
         if(running)setTimeout('MFXopenMenuS(first)',10);
   }
   if(IE&&!thereS&&!(first==lastMain)){
      if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){
         myStep=mySlide[first+1]-myLayer[first+2].pixelTop;
      }
      for(i=first+2; i<myLayer.length; i+=2){
         myLayer[i].pixelTop+=myStep;
      }
         if(myLayer[first+2].pixelTop==mySlide[first+1]){
            MFXstopOpenS(first)
         }
         if(running)setTimeout('MFXopenMenuS(first)',10);
   }
}
function MFXopenMenuC(myName){
   myStep=mySpeed;
   myLayer[first+1].filter="";
   if(NN&&!thereC){
      if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){
         myLayer[first+1].clip.height=myHeight[first+1]
      }
      if(myLayer[first+1].clip.height==myHeight[first+1]){
         thereC=true;
         whichOpen=first;
         MFXstopOpenS(first)
      }
      else{myLayer[first+1].clip.height+=myStep;
      }
      if(running)setTimeout('MFXopenMenuC(first)',10);
      }
      if(IE&&!thereC){
         ieStep+=myStep;
         myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";
         if(ieStep>=myHeight[first+1]){
            thereC=true;
            whichOpen=first;
            MFXstopOpenS(first)
         }
       if(running)setTimeout('MFXopenMenuC(first)',10);
   }
}
function MFXcloseMenuS(myName){
   myStep=mySpeed;
   if(NN&&!thereCS&&!(second==lastMain)){
      if(myLayer[second+2].top-myStep<myTop[second+2]){
         myStep=myLayer[second+2].top-myTop[second+2];
      }
      for(i=second+2; i<myLayer.length; i+=2){
         myLayer[i].top-=myStep;
      }
      if(myLayer[second+2].top==myTop[second+2]){
         MFXstopCloseS(second);
      }
      if(running)setTimeout('MFXcloseMenuS(second)',10);
   }
   if(IE&&!thereCS&&!(second==lastMain)){
      if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
         myStep=myLayer[second+2].pixelTop-myTop[second+2];
      }
      for(i=second+2; i<myLayer.length; i+=2){
         myLayer[i].pixelTop-=myStep;
      }
      if(myLayer[second+2].pixelTop==myTop[second+2]){
         MFXstopCloseS(second);
      }
   if(running)setTimeout('MFXcloseMenuS(second)',10);
   }
}
function MFXcloseMenuC(myName){
   myStep=-mySpeed;
   ieStep1-=mySpeed;
   MFxa-=3;
   myLayer[first+1].filter="alpha(opacity="+MFxa+")";
   //alert(myLayer[first+1].filter);
   if(NN&&!thereCC){
      if ((myLayer[second+1].clip.bottom+myStep)<0){
         myLayer[second+1].clip.bottom=0;
      }
      if(myLayer[second+1].clip.bottom==0){
         thereCC=true;
         if(second==lastMain)MFXstopCloseS(second);}
      else{
         myLayer[second+1].clip.bottom+=myStep;
      }
   if(running)setTimeout('MFXcloseMenuC(second)',10);
}
   if(IE&&!thereCC){
      if(ieStep1<=0){
         myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
         thereCC=true;
         if(second==lastMain)MFXstopCloseS(second);}
      else{
         myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";
      }
   if(running)setTimeout('MFXcloseMenuC(second)',10);
   }
}
</script>
// Impede Sele玢o
    document.onselectstart = function() { return false; }

    // Menu Lateral
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.options{display: none;}\n')
    document.write('</style>\n')
    }
    function SwitchMenu(obj){
     if(document.getElementById){
     var el = document.getElementById(obj);
     var ar = document.getElementById("masterdiv").getElementsByTagName("span");
     if(el.style.display != "block"){
     for (var i=0; i<ar.length; i++){
     if (ar[i].className=="options")
     ar[i].style.display = "none";
     }
     el.style.display = "block";
     }else{
     el.style.display = "none";
     }
     }
    }