求一个JS下拉菜单效果

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td width="30%"><img src="images/hand_main_name05.jpg" width="138" height="49"></td>
                      <td width="24%"><img src="images/hand_main_name06.jpg" width="169" height="49"></td>
                      <td width="46%"><img src="images/hand_main_name07.jpg" width="143" height="49"></td>
                    </tr>
                  </table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td width="30%"><img src="images/hand_main_name01.jpg" width="138" height="49"></td>
                      <td width="24%"><img src="images/hand_main_name02.jpg" width="169" height="49"></td>
                      <td width="46%"><img src="images/hand_main_name03.jpg" width="143" height="49"></td>
                    </tr>
                  </table>我就是想鼠标放在这六个图片上都有对应的下拉框。。

解决方案 »

  1.   

    不要用表格来布局,用DIV 层来布局就好了
      

  2.   

    <html > <head > 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" > 
    <title > </title > 
    <style type="text/css">
    .menuClass
    {
        background-color:gray;
        filter:alpha(opacity=50);
        margin-top:-2;
        width:98px;
        position:absolute;
    }.menuMouseOver
    {
        background-color:green;
        filter:alpha(opacity=50);
        width:98px;
    }.menuMouseOut
    {
        background-color:gray;
        filter:alpha(opacity=50);
        width:98px;
    }
    </style>
    </head > 
    <body > 
    <table>
        <tr>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td></td>
        </tr>
        <tr>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
            <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        </tr>
    </table>
    </body > 
    </html ><script language="javascript" type="text/javascript" > var menu = [  //菜单项数据
        {"url":"1.htm",
        "text":"menu1"
        },
        {"url":"2.htm",
        "text":"menu2"
        },
        {"url":"3.htm",
        "text":"menu2"
        }
    ];function getInfo(o){//取得坐标
    var to=new Object();
    to.left=to.right=to.top=to.bottom=0;
    var twidth=o.offsetWidth;
    var theight=o.offsetHeight;
    while(o!=document.body){
    to.left+=o.offsetLeft;
    to.top+=o.offsetTop;
    o=o.offsetParent;
    }
    to.right=to.left+twidth;
    to.bottom=to.top+theight;
    return to;
    }
    function showDrop(o){  //弹出下拉框      var div = document.createElement("div");
          div.style.top = o.bottom;
          div.style.left = o.left;
          var strHTML = "";
          
          div.className = "menuClass";//层样式
          document.body.appendChild(div);
          //添加菜单项
          for(var i=0;i<menu.length;i++)
          {
                var s = "<span onmouseover=\"this.className='menuMouseOver'\" onmouseout=\"this.className='menuMouseOut'\"  onclick=\"menuClick(this,'"+ menu[i].url +"')\">"+menu[i].text+"</span>";
                i!=menu.length?strHTML+=s+"<br>":strHTML+=s;
                
          }
          div.innerHTML = strHTML;
    }function menuClick(obj,url){  //菜单项单击事件
        obj.parentNode.parentNode.removeChild(obj.parentNode);
        alert(url);
    }
    </script > 
      

  3.   

    CutBug ,鼠标移走了下拉框怎么消失 ？