W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<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="/i/eg_landscape.jpg">教程</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/index.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/xhtml/index.asp">XHTML</a></td></tr> <tr><td class="menu"><a href="/css/index.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/index.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/index.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/i/eg_landscape.jpg">脚本</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/index.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/index.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">验证</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/site/site_validate.asp">验证 HTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">验证 XHTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">验证 CSS</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">验证 XML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">验证 WML</a></td></tr> </table> </td> </tr> </table> <p>把鼠标移动到不同的选项上，就可以看到下拉菜单。</p> </body> </html>