W3School TIY
（请在下面的文本框中编辑您的代码，然后单击此按钮测试结果。）
编辑您的代码：
<html> <head> <style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible" } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden" } </script> </head> <body> <h3>下拉菜单</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="http://api.chiefleo.com/w3school/i/eg_landscape.jpg">教程</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="../html/index.stm" >HTML</a></td></tr> <tr><td class="menu"><a href="../xhtml/index.stm" >XHTML</a></td></tr> <tr><td class="menu"><a href="../css/index.stm" >CSS</a></td></tr> <tr><td class="menu"><a href="../xml/index.stm" >XML</a></td></tr> <tr><td class="menu"><a href="../xsl/index.stm" >XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="http://api.chiefleo.com/w3school/i/eg_landscape.jpg">脚本</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="../js/index.stm" >JavaScript</a></td></tr> <tr><td class="menu"><a href="../vbscript/index.stm" >VBScript</a></td></tr> <tr><td class="menu"><a href="../dhtml/index.stm" >DHTML</a></td></tr> <tr><td class="menu"><a href="../asp/index.stm" >ASP</a></td></tr> <tr><td class="menu"><a href="../ado/index.stm" >ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="../site/site_validate.stm" >验证</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="../site/site_validate.stm" >验证 HTML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.stm" >验证 XHTML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.stm" >验证 CSS</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.stm" >验证 XML</a></td></tr> <tr><td class="menu"><a href="../site/site_validate.stm" >验证 WML</a></td></tr> </table> </td> </tr> </table> <p>把鼠标移动到不同的选项上，就可以看到下拉菜单。</p> </body> </html>
查看结果: