给我一个弹出式菜单的例子，谢谢！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Document</title>
<script language="javascript">
function ShowDiv(Obj){
divDownList.innerHTML='<table id="tabList" style="width:100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="right"><input type="button" value="确定" onclick="doSure()"></td></tr></table>';
var str=Obj.value;
var arr=str.split(",");
for (var i=0;i<arr.length;i++){
var newRow=tabList.insertRow(0);
var newCell=newRow.insertCell();
newCell.innerHTML='<input type="text" id="txtValue" name="txtValue" style="width:100%; background-color:#FFFFEF">';
}
divDownList.style.display="";
}
function HidDiv(Obj){
divDownList.style.display="none";
}
function doSure(){
var str="";
for(var i=0;i<txtValue.length;i++){
if(str!="") str+=",";
str+=txtValue[i].value;
}
txtSource.value=str;
divDownList.style.display="none";
}
</script>
</head><body>
<input name="txtSource" type="text" value="a,b,c,d" style="width:200 " onmouseout="HidDiv(this)" onmouseover="ShowDiv(this)">
<div id="divDownList" style="display:none; width:150; background-color:#CCCCCC"></div>
</body>
</html>

解决方案 »

  1.   

    我的代码是这样的<SCRIPT language=JavaScript>
    <!--
    function MM_findObj(n, d) {
      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); return x;
    }
    function MM_showHideLayers() {
      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; }
    }
    //-->
    </SCRIPT>
    <table>
    <tr><td onmouseover=javascript:MM_showHideLayers('menu1','','show'); onmouseout=javascript:MM_showHideLayers('menu1','','hide')><a herf=# >菜单</a></td></tr></table>
    <DIV class=cai id=menu1 
                            style="Z-INDEX: 3; LEFT: 143px; VISIBILITY: hidden; WIDTH: 100px; POSITION: absolute; TOP: 151px; HEIGHT: 102px">
                            
                            <table onmouseover="MM_showHideLayers('menu1','','show');" 
                            onmouseout="MM_showHideLayers(menu1','','hide')"  height=100 width=100 bgcolor=#99ff33><tr><td>弹出菜单</td></tr></table>
                            </div>
      

  2.   

    上面是我的代码，div层的位置不好控制
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    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; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </script>
    </head><body>
    <SCRIPT language=JavaScript>
    <!--
    //-->
    </SCRIPT>
    <table border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td onmouseover=javascript:MM_showHideLayers('menu1','','show'); onmouseout=javascript:MM_showHideLayers('menu1','','hide')><a herf=# >菜单</a></td>
      </tr>
      <tr>
        <td valign="top"><DIV class=cai id=menu1 
                            style="Z-INDEX: 3; VISIBILITY: hidden; WIDTH: 100px; POSITION: absolute; HEIGHT: 102px"> 
            <table onmouseover="MM_showHideLayers('menu1','','show');" 
                            onmouseout="MM_showHideLayers(menu1','','hide')"  height=100 width=100 bgcolor=#99ff33>
              <tr>
                <td>弹出菜单</td>
              </tr>
            </table>
          </div></td>
      </tr>
    </table>
    </body>
    </html>
      

  4.   

    <SCRIPT language=JavaScript>
    <!--function MM_showHideLayers(src,flag) {
    if(flag==0){
    var left=0;
    var top=0;
    var obj=window.event.srcElement;
    while(obj.offsetParent){
    left+=obj.offsetLeft;
    top+=obj.offsetTop;
    obj=obj.offsetParent;
    }
    document.all.menu1.style.left=left;
    document.all.menu1.style.top=top+src.clientHeight;
    document.all.menu1.style.display ="";
    }else{
    document.all.menu1.style.display ="none";
    }
    }
    //-->
    </SCRIPT>
    <table>
    <tr>
    <td onmouseover="MM_showHideLayers(this,0);" onmouseout="MM_showHideLayers(this,1)">
    <a herf=# >菜单</a>
    </td></tr></table>
    <DIV class=cai id=menu1 
    style="Z-INDEX: 3; LEFT: 143px; display: none; WIDTH: 100px; POSITION: absolute; TOP: 151px; HEIGHT: 102px">
    <table height=100 width=100 bgcolor=#99ff33><tr><td>弹出菜单</td></tr></table>
    </div>