自己稍加修改:<html><head><title>Untitled Document</title></head><body>
<div align=left><table width="410" height=50 border=1 align="left" cellpadding="0" cellspacing="0">                                      
<tr >
   <td width="100">
       <input type=button value=ok onmouseover="cc(this,'pop1')"
         onmouseout="document.all.pop1.style.display='none'">
   </td>
   <td width="100">
       <input type=button value=ok onmouseover="cc(this,'pop2')"
         onmouseout="document.all.pop2.style.display='none'">
   </td>
   <td width="100" >
       <input type=button value=ok onmouseover="cc(this,'pop3')"
         onmouseout="document.all.pop3.style.display='none'">
        <td width="100">
       <input type=button value=ok onmouseover="cc(this,'pop4')"
         onmouseout="document.all.pop4.style.display='none'">
   </td>
   </tr>
</table>
<div><div id=pop1 style="position:absolute;width:100;height:50;z-index:99;display:none">
<table border=0 bgcolor=#FF0000><tr><td>图层文字1</td></tr></table></div><div id=pop2 style="position:absolute;width:100;height:50;z-index:99;display:none">
<table border=0 bgcolor=#FF0000><tr><td>图层文字2</td></tr></table></div><div id=pop3 style="position:absolute;width:100;height:50;z-index:99;display:none">
<table border=0 bgcolor=#FF0000><tr><td>图层文字3</td></tr></table></div><div id=pop4 style="position:absolute;width:100;height:50;z-index:99;display:none">
<table border=0 bgcolor=#FF0000><tr><td>图层文字4</td></tr></table></div></body></html><script language=javascript>
function cc(tt,pop)
{
   var daps    = document.getElementById(pop).style;
   var ttop    = tt.offsetTop;          //TT控件的定位点高
   var thei    = tt.clientHeight;    //TT控件本身的高
   var tleft = tt.offsetLeft;        //TT控件的定位点宽
   var ttyp    = tt.type;                    //TT控件的类型
   while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
   daps.top    = ttop//层的 Y 坐标
   daps.left = tleft-100;    //层的 X 坐标
   daps.display = "";    //层显示
}
</script>

解决方案 »

  1.   

    这样的菜单太多了。最简单的就是查看这个网页的源代码。相信csdn也有不少
      

  2.   

    <html><head><title>Untitled Document</title></head><body>
    <div align=left><table width="410" height=50 border=1 align="left" cellpadding="0" cellspacing="0">                       --410是每个单元格 4*100+8个td+2个border                      
    <tr >
       <td width="100">
           <input type=button value=ok onmouseover="cc(this,'pop1')"
             onmouseout="document.all.pop1.style.display='none'">
       </td>
       <td width="100">
           <input type=button value=ok onmouseover="cc(this,'pop2')"
             onmouseout="document.all.pop2.style.display='none'">
       </td>
       <td width="100" >
           <input type=button value=ok onmouseover="cc(this,'pop3')"
             onmouseout="document.all.pop3.style.display='none'">
            <td width="100">
           <input type=button value=ok onmouseover="cc(this,'pop4')"
             onmouseout="document.all.pop4.style.display='none'">
       </td>
       </tr>
    </table>
    <div><div id=pop1 style="position:absolute;width:100;height:50;z-index:99;display:none" onMouseMove="this.style.display=''" onMouseout="this.style.display='none'";>
    <table border=0 bgcolor=#FF0000><tr><td>图层文字1</td></tr></table></div><div id=pop2 style="position:absolute;width:100;height:50;z-index:99;display:none" onMouseMove="this.style.display=''"; onMouseout="this.style.display='none'";>
    <table border=0 bgcolor=#FF0000><tr><td>图层文字2</td></tr></table></div><div id=pop3 style="position:absolute;width:100;height:50;z-index:99;display:none" onMouseMove="this.style.display=''"; onMouseout="this.style.display='none'";>
    <table border=0 bgcolor=#FF0000><tr><td>图层文字3</td></tr></table></div><div id=pop4 style="position:absolute;width:100;height:50;z-index:99;display:none" onMouseMove="this.style.display=''"; onMouseout="this.style.display='none'";>
    <table border=0 bgcolor=#FF0000><tr><td>图层文字4</td></tr></table></div></body></html>
    <script language=javascript>
    function cc(tt,pop)
    {
       var daps    = document.getElementById(pop).style;
       var ttop    = tt.offsetTop;          //TT控件的定位点高
       var thei    = tt.clientHeight;    //TT控件本身的高
       var wid     = tt.clientWidth
       var tleft = tt.offsetLeft;        //TT控件的定位点宽
       var ttyp    = tt.type;                    //TT控件的类型
       while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
       daps.top    = ttop//层的 Y 坐标
       daps.left = tleft-75   //层的 X 坐标
       daps.display = "";    //层显示
    }
    </script>