简单问题，如何实现这个菜单的效果，请帮忙！

推荐使用Sothink的DHTMLMenu，可以直接生成你想要的菜单，不需要写代码，十分方便的说，效果也很好。
地址：www.sothink.com

解决方案 »

  1.   

    <html><head><title></title>
    <meta http-equiv="Content-Type" content="text/html;
     charset=gb2312">
    <script language="JavaScript1.2">
    scores = new Array(50); 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 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();
    }
    } </script>
    </head><body>
    <table border=0 onload="initIt();expandIt('KB1')">
    <tr>
    <td align=left>
    <div id='KB1Parent' class='parent'>
    <A HREF="sss.asp?SearchClass=58" onClick="expandIt('KB1'); return false">
    <span class="text">大学</span>
    </A>
    <BR>
    </div> <div id='KB1Child' class='child'>
      <!---小??始--->
      
    <A HREF="default.asp?SearchClass2=61" ><span class="text">大一</span></A><BR>
    <A HREF="default.asp?SearchClass2=62" ><span class="text">大二</span></A><BR>
    <A HREF="default.asp?SearchClass2=63" ><span class="text">大三</span></A><BR>
    <A HREF="default.asp?SearchClass2=67" ><span class="text">大四</span></A><BR>

    </div>  <!---小??束----> <div id='KB2Parent' class='parent'><A HREF="sss.asp?SearchClass=59" onClick="expandIt('KB2');
     return false"><span class="text">中学</span></A><BR>
       </div> <div id='KB2Child' class='child'>   <!---小??始--->

      
    <A HREF="default.asp?SearchClass2=64" ><span class="text">初一</span></A><BR>
      
    <A HREF="default.asp?SearchClass2=65" ><span class="text">初二</span></A><BR>
      
    <A HREF="default.asp?SearchClass2=66" ><span class="text">初三</span></A><BR>

     </div>  <!---小??束----> <div id='KB3Parent' class='parent'><A HREF="sss.asp?SearchClass=60" onClick="expandIt('KB3');
     return false"><span class="text">小学</span></A><BR>
       </div> <div id='KB3Child' class='child'>   <!---小??始---><A HREF="default.asp?SearchClass2=66" ><span class="text">一年?</span></A><BR>
      <A HREF="default.asp?SearchClass2=66" ><span class="text">二年?</span></A><BR>

     </div>  <!---小??束---->

    <SCRIPT>numTotal=3;
    scores[1]='KB1';
    scores[2]='KB2';
    scores[3]='KB3';
    </SCRIPT>
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    <style type="text/css">
      .titleStyle{
          background-color:#008800;color:#ffffff;
          border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
      }
      .contentStyle{
          background-color:#eeffee;color:blue;font-size:9pt;
      }
    </style><html>
    <BODY>
     
    <script language="JavaScript">
     <!--
     var layerTop=20;       //菜单顶边距
     var layerLeft=30;      //菜单左边距
     var layerWidth=140;    //菜单总宽度
     var titleHeight=20;    //标题栏高度
     var contentHeight=200; //内容区高度
     var stepNo=10;         //移动步数，数值越大移动越慢
     var itemNo=0;
      //建立一个名为"itemsLayer"的层，用它限制所有菜单的显示范围：
     document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');
     function addItem(itemTitle,itemContent){ 
       //这个函数准备接受菜单标题和内容的写入
         //新增菜单的顶点刚好在上一菜单的标题栏以下，尺寸由一开始便声明的变量决定
       itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+ ' style="position:relative;left:0; top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';">'+ '<table width=100% cellspacing="0" cellpadding="0">'+'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr> </table></div>';
       document.write(itemHTML);
       itemNo++;
     }
     //这时便可以把菜单标题和内容作为参数调用以上函数了：
      //你可以添加任意多项，格式参照以下几行： addItem('欢迎','<BR>欢迎光临设计在线！');
     addItem('网页陶吧','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
     addItem('美工教室','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
     addItem('Flash','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
     addItem('多媒体','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
     addItem('精品赏析','<a href="#">设计精品</a>');
     document.write('</span>');   //结束"itemsLayer"层  //下面一式计算"itemsLayer"层的高度：
     document.all.itemsLayer.style.height = itemNo*titleHeight+contentHeight;
     //现在开始编写点击标题时移动相应的层：
      //初始化变量"toItemIndex"和"onItemIndex"，
     var toItemIndex=itemNo-1;
     var onItemIndex=itemNo-1;
     var runtimes=0;  //"runtimes"用于记录层移动次数
      //菜单标题被点击时调用这个函数：
     function changeItem(clickItemIndex){
        //判断相应的层应上移还是下移：
       toItemIndex=clickItemIndex;
       if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
        //一定的时间间隔后继续移动，直到移了设定的步数stepNo:
       runtimes++;
       if(runtimes>=stepNo){
         onItemIndex=toItemIndex;
         runtimes=0;}
       else
         setTimeout("changeItem(toItemIndex)",10);
     }
      //相应菜单上移：
     function moveUp(){
        //判断应一起上移的菜单，并让它(们)每次移动contentHeight/stepNo的距离：
       for(i=onItemIndex+1;i<=toItemIndex;i++)
         eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
     }
      //相应菜单下移：
     function moveDown(){
       for(i=onItemIndex;i>toItemIndex;i--)
         eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
     }
     changeItem(0); //把第一个菜单作为默认显示
     //-->
    </script></BODY>
    </html>