我是新手，在网页中怎么做菜单，有没有简单的例子。 能不能帮我写一个最简单的例子帖在上面，谢谢！！

http://www.blueidea.com/bbs/NewsDetail.asp?id=887527
这里有个视频教程，很简单！

解决方案 »

  1.   

    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    </head><body onclick="hiddenMenu()">
    <DIV STYLE="left:0; top:0; text-align:center; color:white; width:100">
    <DIV id="menu" STYLE="visibility:visible; height:20; background:black" onmouseover="showMenu()">菜单</DIV>
    <DIV id="submenu1" STYLE="visibility:hidden; height:20; background:black">子菜单</DIV>
    <DIV id="submenu2" STYLE="visibility:hidden; height:20; background:black">子菜单</DIV>
    <DIV id="submenu3" STYLE="visibility:hidden; height:20; background:black">子菜单</DIV>
    </DIV>
    <script language="JavaScript">
    <!--
    function showMenu () {
    for (var i=1; i<4; i++) {
    document.getElementById("submenu"+i).style.visibility = "visible";
    }
    }
    function hiddenMenu () {
    for (var i=1; i<4; i++) {
    document.getElementById("submenu"+i).style.visibility = "hidden";
    }
    }
    //-->
    </script>
    </body>
    </html>
      

  2.   

    我写了个现成的：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>下拉菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript" type="text/JavaScript">
    function showhidelayers(l,showorhide){
    var v;
    mylayer=document.getElementById(l);
    if(showorhide=='show')
      v="visible"
    else if(showorhide='hide')
      v="hidden";
    mylayer.style.visibility=v;
    }
    </script>
    </head>
    <body>
    <div id="Layer1" style="position:absolute; width:122px; height:14px; z-index:1" onMouseOver="showhidelayers('layer2','show')" onMouseOut="showhidelayers('layer2','hide')">
      <div id="Layer2" style="position:absolute; width:122px; height:115px; z-index:1; left: 0px; top: 17px;visibility: hidden;" onMouseOver="showhidelayers('layer2','show')" onMouseOut="showhidelayers('layer2','hide')">
        <br>
        <p>下拉菜单</p>
        <p>下拉菜单</p>
        <p>下拉菜单</p>
        <p>下拉菜单</p>
      </div>
    下拉菜单</div>
    </body>
    </html>
      

  3.   

    用dreamweaver也是可以做的，生成的代码：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>下拉菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {
       if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; 
        document.MM_pgH=innerHeight; 
        onresize=MM_reloadPage; }
      }
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) 
       location.reload();
    }
    MM_reloadPage(true);function MM_findObj(n, d) { //v4.01
      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 && d.getElementById) 
        x=d.getElementById(n); 
      return x;
    }function MM_showHideLayers() { //v6.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; 
        if(v=='show')
          v="visible"
        else if(v=='hide')
          v="hidden"; 
       }
      obj.visibility=v; 
       }
    }
    //-->
    </script>
    </head><body>
    <div id="Layer1" style="position:absolute; width:158px; height:19px; z-index:1" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">下拉菜单
      <div id="Layer2" style="position:absolute; width:159px; height:115px; z-index:2; left: 0px; top: 19px; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer2','','hide')" onMouseOver="MM_showHideLayers('Layer2','','show')">
        <p>下拉菜单</p>
        <p>下拉菜单</p>
        <p>下拉菜单</p>
        <p>下拉菜单</p>
      </div>
    </div></body>
    </html>