菜单怎么做？（用javascript）

<html> 
<head>
<title>菜单栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> 
body {cursor: default;border:0} 
.button1 {BORDER-RIGHT: threedshadow 1pt solid; BORDER-TOP: threedhighlight 1pt solid; BORDER-LEFT: threedhighlight 1pt solid; BORDER-BOTTOM: threedshadow 1pt solid;font: 9pt "宋体";color:menutext} 
.button2 {BORDER: 1pt dedfde solid;color:menutext; font-family: "宋体"; font-size: 9pt} 
.button3 {BORDER-RIGHT: threedhighlight 1pt solid; BORDER-TOP: threedshadow 1pt solid; BORDER-LEFT: threedshadow 1pt solid; BORDER-BOTTOM: threedhighlight 1pt solid;font: 9pt "宋体";color:menutext} 
.tdomo { background-color: d6e3ff;color: #000000; border: 1px #08246b solid} 
a:active {  text-decoration: none; color: #000000}
a:hover {  text-decoration: none; color: #000000}
a:link {  text-decoration: none; color: #000000}
a:visited {  text-decoration: none; color: #000000}
.bb1 {  border-color: #FFFFFF #333333 #333333 #FFFFFF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.bb2 { font-family: "宋体"; font-size: 9pt; color: #000000; border-style: none; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
</style>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
if(!x && document.getElementById) x=document.getElementById(n); return x; 
} 
function MM_showHideLayers() { //v3.0 
var i,p,v,obj,args=MM_showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; 
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } 
obj.visibility=v; } 
} 
function sh(na,nat) { 
if (na.style.visibility== 'hidden') { 
na.style.visibility= 'visible' 
} else { 
na.style.visibility= 'hidden' 
nat.className='button1' 
} 
} 
function sh2(nt,nl) { 
test=fl.style.visibility=='visible' || el.style.visibility=='visible' || vl.style.visibility=='visible' || al.style.visibility=='visible' || tl.style.visibility=='visible' || hl.style.visibility=='visible' 
if (test==true) { 
MM_showHideLayers('fl','','hide','el','','hide','vl','','hide','al','','hide','tl','','hide','hl','','hide'); 
ft.className='button2'; 
et.className='button2'; 
vt.className='button2'; 
ht.className='button2'; 
nt.className='button3'; 
nl.style.visibility= 'visible'; 
} else { 
if (nt.className!='button3') { 
nt.className='button1' 
} 
} 
} 
function mo(na) { 
if (na.className=='button1') { 
na.className="button2" 
} 
}function sb(m){
m.className="bb1";//mouseover
}function hb(m){
m.className="bb2";//mouseout
}
//-->
</script>
</head>

解决方案 »

  1.   

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="MM_showHideLayers('fl','','hide','el','','hide','vl','','hide','al','','hide','tl','','hide','hl','','hide');return false;">
    <div id="fl" style="position:absolute; left:28px; top:33px; width:118px; height:47px; z-index:1; visibility: hidden; background-color: #dedfde; layer-background-color: #dedfde; border: 1px none #000000"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" >
        <tr> 
          <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;">
              <tr> 
                <td> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border:1px threedface solid;font:menu;color:menutext">
                    <tr> 
                      <td height="20" id=adda onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('fl','','hide');hb(ft);">　<a href="add.htm" target="mainFrame">添加(A)</a></td>
                    </tr>
                    <tr> 
                      <td height="7"> 
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px threedface solid">
                          <tr> 
                            <td height="2" style="border-bottom:1px threedshadow solid"><img src="../c(1).gif" width="1" height="3"></td>
                          </tr>
                          <tr> 
                            <td height="3" style="border-top:1px threedhighlight solid"><img src="../c(1).gif" width="1" height="4"></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onclick="MM_showHideLayers('fl','','hide');hb(ft);">　<a href="javascript:window.close();" target="_parent">关闭(C)</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div id="el" style="position:absolute; left:85px; top:33px; width:118px; height:60px; z-index:1; visibility: hidden; background-color: #dedfde; layer-background-color: #dedfde; border: 1px none #000000"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" >
        <tr> 
          <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;">
              <tr> 
                <td> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border:1px threedface solid;font:menu;color:menutext">
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('el','','hide');hb(et);">　<a href="update.htm" target="mainFrame">修改(U)</a></td>
                    </tr>
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('el','','hide');hb(et);">　删除(D)</td>
                    </tr>
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('el','','hide');hb(et);">　查找(F)</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div id="vl" style="position:absolute; left:141px; top:33px; width:118px; height:24px; z-index:1; visibility: hidden; background-color: #dedfde; layer-background-color: #dedfde; border: 1px none #000000"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" >
        <tr> 
          <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;">
              <tr> 
                <td> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border:1px threedface solid;font:menu;color:menutext">
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('vl','','hide');hb(vt);">　<a href="explorer.htm" target="mainFrame">浏览(V)</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div id="al" style="position:absolute; left:196px; top:53px; width:2; height:2; z-index:4; visibility: hidden"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedlightshadow solid;border-left:1px threedlightshadow solid;border-right:1px threeddarkshadow solid;border-bottom:1px threeddarkshadow solid;"> 
    <tr> 
    <td> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;"> 
    <tr> 
    <td style="border:1px threedface solid;"> </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    </table> 
    </div> 
    <div id="tl" style="position:absolute; left:1px; top:1px; width:1; height:1; z-index:5; visibility: hidden"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedlightshadow solid;border-left:1px threedlightshadow solid;border-right:1px threeddarkshadow solid;border-bottom:1px threeddarkshadow solid;">
        <tr> 
          <td> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;">
              <tr> 
                <td style="border:1px threedface solid;"> </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div id="hl" style="position:absolute; left:197px; top:33px; width:118px; height:56px; z-index:1; visibility: hidden; background-color: #dedfde; layer-background-color: #dedfde; border: 1px none #000000"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" >
        <tr> 
          <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border-top:1px threedhighlight solid;border-left:1px threedhighlight solid;border-right:1px threedshadow solid;border-bottom:1px threedshadow solid;">
              <tr> 
                <td> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style="border:1px threedface solid;font:menu;color:menutext">
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('hl','','hide');hb(ht);">　<a href="setup.exe.nfo">文档帮助(H)</a></td>
                    </tr>
                    <tr> 
                      <td height="7"> 
      

  2.   

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px threedface solid">
                          <tr> 
                            <td height="2" style="border-bottom:1px threedshadow solid"><img src="../c(1).gif" width="1" height="3"></td>
                          </tr>
                          <tr> 
                            <td height="3" style="border-top:1px threedhighlight solid"><img src="../c(1).gif" width="1" height="4"></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr> 
                      <td height="20" onMouseOver="this.className='tdomo'" onMouseOut="this.className=''" onClick="MM_showHideLayers('hl','','hide');hb(ht);">　<a href="#">版本信息(I)</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <table border="0" cellspacing="0" cellpadding="0" height="20" width="100%" bgcolor="dedfde">
      <tr bgcolor="#CCCCCC"> 
        <td colspan="7" height="10"></td>
      </tr>
      <tr> 
        <td width="28" height="24"> 
          <div align="center"><img src="images/leftbutton.gif" width="3" height="18"></div>
        </td>
        <td id="ft" class=button2 onmouseout="mo(ft)" onmouseover="sh2(ft,fl)" onmousedown="this.className='button3'" onclick="sh(fl,ft)" align="center" valign="middle" width="55" nowrap height="24">文件(F)</td>
        <td id="et" class=button2 onmouseout=mo(et) onmouseover="sh2(et,el)" onmousedown="this.className='button3'" onclick="sh(el,et)" align="center" valign="middle" width="54" nowrap height="24">编辑(E)</td>
        <td id="vt" class=button2 onmouseout=mo(vt) onmouseover="sh2(vt,vl)" onmousedown="this.className='button3'" onclick="sh(vl,vt)" align="center" valign="middle" width="54" nowrap height="24">工具(T)</td>
        <td id="ht" class=button2 onmouseout=mo(ht) onmouseover="sh2(ht,hl)" onmousedown="this.className='button3'" onclick="sh(hl,ht)" align="center" valign="middle" width="54" nowrap height="24">帮助(H)</td>
        <td height="24" colspan="2" nowrap>&nbsp; </td>
      </tr>
    </table><table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" bgcolor="dedfde">
      <tr> 
        <td align="center"> 
        </td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body> 
    </html>