顶部下拉

  1. <html>
  2. <head>
  3. <style>
  4. body{font-family:arial;}
  5. table{font-size:80%;background:black}
  6. a{color:black;text-decoration:none;font:bold}
  7. a:hover{color:#606060}
  8. td.menu{background:lightblue}
  9. table.menu
  10. {
  11. font-size:100%;
  12. position:absolute;
  13. visibility:hidden;
  14. }
  15. </style>
  16. <script type="text/javascript">
  17. function showmenu(elmnt)
  18. {
  19. document.getElementById(elmnt).style.visibility="visible"
  20. }
  21. function hidemenu(elmnt)
  22. {
  23. document.getElementById(elmnt).style.visibility="hidden"
  24. }
  25. </script>
  26. </head>
  27.  
  28. <body>
  29. <h3>下拉菜单</h3>
  30. <table width="100%">
  31.  <tr bgcolor="#FF8080">
  32.   <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
  33.    <a href="/i/eg_landscape.jpg">教程</a><br />
  34.    <table class="menu" id="tutorials" width="120">
  35.    <tr><td class="menu"><a href="/html/index.asp">HTML</a></td></tr>
  36.    <tr><td class="menu"><a href="/xhtml/index.asp">XHTML</a></td></tr>
  37.    <tr><td class="menu"><a href="/css/index.asp">CSS</a></td></tr>
  38.    <tr><td class="menu"><a href="/xml/index.asp">XML</a></td></tr>
  39.    <tr><td class="menu"><a href="/xsl/index.asp">XSL</a></td></tr>
  40.    </table>
  41.   </td>
  42.   <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
  43.    <a href="/i/eg_landscape.jpg">脚本</a><br />
  44.    <table class="menu" id="scripting" width="120">
  45.    <tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr>
  46.    <tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr>
  47.    <tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr>
  48.    <tr><td class="menu"><a href="/asp/index.asp">ASP</a></td></tr>
  49.    <tr><td class="menu"><a href="/ado/index.asp">ADO</a></td></tr>
  50.    </table>
  51.   </td>
  52.   <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
  53.    <a href="/site/site_validate.asp">验证</a><br />
  54.    <table class="menu" id="validation" width="120">
  55.    <tr><td class="menu"><a href="/site/site_validate.asp">验证 HTML</a></td></tr>
  56.    <tr><td class="menu"><a href="/site/site_validate.asp">验证 XHTML</a></td></tr>
  57.    <tr><td class="menu"><a href="/site/site_validate.asp">验证 CSS</a></td></tr>
  58.    <tr><td class="menu"><a href="/site/site_validate.asp">验证 XML</a></td></tr>
  59.    <tr><td class="menu"><a href="/site/site_validate.asp">验证 WML</a></td></tr>
  60.    </table>
  61.   </td>
  62.  </tr>
  63. </table>
  64. <p>把鼠标移动到不同的选项上，就可以看到下拉菜单。</p>
  65. </body>
  66.  
  67. </html>