Clicking the hyperlink to display the hidden layer implemented by js

Click the link to display the prompt box, and there are links in the prompt box that can be clicked.
Move the mouse away from the link or the prompt box, and the prompt box will be hidden.

What I wrote below cannot be adaptive. If the menu is aligned to the left, can the display layer be automatically displayed on the right? How should I adjust JS?

<div id="link-url">
<table width="400" cellspacing="5"> 
    <tr> 
      <td> 
        <div id="d-k"> 
            <a onclick="onClickbox('Layer1');" onmouseout="onMouseOutbox('Layer1')">我点击一</a> 
            <div id="Layer1" style="display:none;" onmouseover="onMouseOverbox('Layer1')" onmouseout="onMouseOutbox('Layer1')"> 
                <div id="show-k">  
                    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td>1sty人的和lesdf人的和人的和11</td> 
                        <td>人的和人的和人的和人的和人的和</td> 
                        <td>33人的和人的和人的和人的和3</td> 
                        <td>44人的和人的和人的和人的和人的和人的和人的和人的和4</td> 
                      </tr> 
                    </table>
  </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
    <td>
      <div id="d-k">
        <a onclick="onClickbox('Layer2')" onmouseout="onMouseOutbox('Layer2')">
            </a>I clicked one<div id="Layer2" style="display:none;" onmouseover="onMouseOverbox('Layer2')" onmouseout="onMouseOutbox('Layer2')">
            <div id="show-k">
                <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td><a href="#" onclick="change('Layer2')">111</a></td> 
                        <td><a href="#" onclick="change('Layer2')">222</a></td> 
                        <td><a href="#" onclick="change('Layer2')">333</a></td> 
                        <td><a href="#" onclick="change('Layer2')">444</a></td> 
                      </tr> 
                    </table>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                      
                        <a href="#" onclick="change('Layer2')">111
                        </a><a href="#" onclick="change('Layer2')">222<tr><td>
                        <div id="d-k">
<a href="#" onclick="change('Layer2')">333</a><a onclick="onClickbox('Layer3')" onmouseout="onMouseOutbox('Layer3')"></a>
                        <div id="Layer3" style="display:none;" onmouseover="onMouseOverbox('Layer3')" onmouseout="onMouseOutbox('Layer3')"><a href="#" onclick="change('Layer2')">444<div id="show-k">
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td><a href="#" onclick="change('Layer3')">111</a></td> 
                        <td><a href="#" onclick="change('Layer3')">222</a></td> 
                        <td><a href="#" onclick="change('Layer3')">333</a></td> 
                        <td><a href="#" onclick="change('Layer3')">444</a></td> 
                      </tr> 
                    </table>
                      </div>
                    </a></div>
</div>
</td></tr></a>
</table>
                </div>
            </div>
        </div>
</td>
      </tr>
    <tr>
    <td>
      <div id="d-k">
        <a onclick="onClickbox('Layer4')" onmouseout="onMouseOutbox('Layer4')">
            </a>I clicked one<div id="Layer4" style="display:none;" onmouseover="onMouseOverbox('Layer4')" onmouseout="onMouseOutbox('Layer4')">
            <div id="show-k">
                <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td><a href="#" onclick="change('Layer4')">111</a></td> 
                        <td><a href="#" onclick="change('Layer4')">222</a></td> 
                        <td><a href="#" onclick="change('Layer4')">333</a></td> 
                        <td><a href="#" onclick="change('Layer4')">444</a></td> 
                      </tr> 
                    </table>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <script language="javascript"> 
function change(x) {document.getElementById(x).style.display ="none";} 
function onClickbox(y){document.getElementById(y).style.display ="";} 
function onMouseOutbox(z){document.getElementById(z).style.display ="none";} 
function onMouseOverbox(a){document.getElementById(a).style.display ="";} 
</script>
                        <script language="javascript"> 
function change(x) {document.getElementById(x).style.display ="none";} 
function onClickbox(y){document.getElementById(y).style.display ="";} 
function onMouseOutbox(z){document.getElementById(z).style.display ="none";} 
function onMouseOverbox(a){document.getElementById(a).style.display ="";} 
</script><a href="#" onclick="change('Layer3')">111
                        </a><a href="#" onclick="change('Layer3')">222
                        </a><a href="#" onclick="change('Layer3')">333
                        </a><a href="#" onclick="change('Layer3')">444
                      
                    </a>
</table>
                
            
        
      
    
    
      
        
        I clicked one
            
                
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                      
                        <a href="#" onclick="change('Layer4')">111
                        </a><a href="#" onclick="change('Layer4')">222
                        </a><a href="#" onclick="change('Layer4')">333
                        </a><a href="#" onclick="change('Layer4')">444
                      
                    </a>
</table>
</div>
            </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="d-k">
            <a onclick="onClickbox('Layer5')" onmouseout="onMouseOutbox('Layer5')">I clicked one</a>
            <div id="Layer5" style="display:none;" onmouseover="onMouseOverbox('Layer5')" onmouseout="onMouseOutbox('Layer5')">
                <div id="show-k">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                      <tr> 
                        <td><a href="#" onclick="change('Layer5')">111</a></td> 
                        <td><a href="#" onclick="change('Layer5')">222</a></td> 
                        <td><a href="#" onclick="change('Layer5')">333</a></td> 
                        <td><a href="#" onclick="change('Layer5')">444</a></td> 
                      </tr> 
                    </table>
                        <a href="#" onclick="change('Layer5')">111
                        </a><a href="#" onclick="change('Layer5')">222</a>
</table>
                        </div>
<a href="#" onclick="change('Layer5')">333</a>
</div>
                        <a href="#" onclick="change('Layer5')">444<br>
                      <input onclick="runEx('runcode31019')" type="button" value="运行代码">
                    <input onclick="doCopy('runcode31019')" type="button" value="复制代码">
                <input onclick="doSave(runcode31019)" type="button" value="保存代码">
            </a><a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">
        </a>
      </div>
    <br>
  <br>
<div class="htmlarea">
<textarea id="runcode97806">

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]</a>
</table>
</td>
</tr></a>
</table>
</div>
</div>
</div>
</td>
</tr></a>
</table>
</table>
</div></a>
</table>
</div>
</div>
</div>
</td>
</tr>
</table></div>