答案：点击链接，显示提示框，提示框里也有链接可点击. 鼠标移开链接或者移开提示框，提示框就隐藏。 下面这个我写的不能自适应，如果菜单左对齐，显示层能否自动在右边显示？应该怎样调整JS？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <style> body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decoration:none;cursor:pointer;} #link-url a:hover {background:#ccc;} #d-k{position:relative; margin:0px 0px 0px 0px;z-index:0;} #Layer1,#Layer2,#Layer3,#Layer4,#Layer5{position:absolute; left: 70px; top: 0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color:#000; border:#ccc 1px solid; height:100px;z-index:3;filter:alpha(opacity=70);opacity:0.7; width:500px;} </style> <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> <body> <div id="link-url" > <table width="400" cellspacing="5"> <tr> <td> <div id="d-k"> 我点击一 <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"> 我点击一 <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>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> 我点击一 <div id="Layer3" style="display:none;" onMouseOver="onMouseOverbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> 我点击一 <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>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> 我点击一 <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"> <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> </table> </div> </div> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]左对齐效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <style> body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decoration:none;cursor:pointer;} #link-url a:hover {background:#ccc;} #d-k{position:relative; margin:0px 0px 0px 0px;z-index:0;} #Layer1,#Layer2,#Layer3,#Layer4,#Layer5{position:absolute; left: 70px; top: 0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color:#000; border:#ccc 1px solid; height:100px;z-index:3;filter:alpha(opacity=70);opacity:0.7; width:500px;} </style> <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> <body> <div id="link-url" > <table width="400" align="right" cellspacing="5"> <tr> <td> <div id="d-k"> 我点击一 <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"> 我点击一 <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>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> 我点击一 <div id="Layer3" style="display:none;" onMouseOver="onMouseOverbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')"</pre><p>上一个：<a href="/show/59ad88ebb84f3372.htm">Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例</a><br/>下一个：<a href="/show/1dfd5c033fc1293c.htm">Javascript & DHTML 实例编程（教程）DOM基础和基本API</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/1a0349215cfc161d.htm"><img src='/upload/20121013/preview_b01.jpg' width=105 height=105><br/>js实现图片等比缩略显示 支持IE/FF</a></li><li><a href="/show/dd70e2a8c75d78eb.htm"><img src='/upload/20121013/top_movie_3.gif' width=105 height=105><br/>多图幻灯Pixelate马赛克效果</a></li><li><a href="/show/dca2f45fe35efc2a.htm"><img src='/upload/20135/31/20130531141022386.gif' width=105 height=105><br/>XMLHttpRequest Ajax 实例aspx.net使用简介</a></li><li><a href="/show/62c1ca634ec97ee0.htm"><img src='/upload/2013111520/20120516111732527.jpg' width=105 height=105><br/>JS编辑器获取选择内容的HTML多浏览器兼容性写法（支持Chorme、Firefox）</a></li><li><a href="/show/7c18fcc1798a964d.htm"><img src='/upload/2013111604/20121231015116407.png' width=105 height=105><br/>温习一下Struts1.2x</a></li><li><a href="/show/07bedc94a5b11fee.htm"><img src='/upload/2013111617/20130126105741284.png' width=105 height=105><br/>[cocos2d-x从c++到js]01：迎接脚本时代的到来</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/b636313fd0bf206e.htm">js把图片转换成 base64代码</a></dd><dd><a target="_blank" href="/show/f104aaf60c037fed.htm">js把base代码转换成图片</a></dd><dd><a target="_blank" href="/show/02f65fc48980b1fe.htm">JS 将 base64编码的图片转化为图片文件</a></dd><dd><a target="_blank" href="/show/5044556d492a3bd0.htm">js中的定时器</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>