左侧导航

  1. <html>
  2. <head>
  3. <style>
  4. table
  5. {
  6. font-size:12;
  7. background-color:#c0c0c0;
  8. }
  9. span
  10. {
  11. border:groove 2px;
  12. padding:3;
  13. font-family:arial;
  14. font-size:12;
  15. width:90;
  16. height:40;
  17. background-color:#c0c0c0;
  18. position:relative;
  19. top:-15;
  20. left:-80;
  21. }
  22. </style>
  23. <script type="text/javascript">
  24. function showmenu(elmnt)
  25. {
  26. elmnt.style.left="-10"
  27. }
  28.  
  29. function hidemenu(elmnt)
  30. {
  31. elmnt.style.left="-80"
  32. }
  33. </script>
  34. </head>
  35. <body>
  36.  
  37. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  38. <table border="0" width="100%">
  39. <tr>
  40. <td width="90%"><a href="/index.html">HOME</a></td>
  41. <td rowspan="2">A</td>
  42. </tr><tr>
  43. <td><a href="/js/index.asp">JavaScript</a></td>
  44. </tr>
  45. </table>
  46. </span>
  47.  
  48. <br />
  49.  
  50. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  51. <table width="100%">
  52. <tr>
  53. <td width="90%"><a href="http://www.microsoft.com">Explorer</a></td>
  54. <td rowspan="2">B</td>
  55. </tr><tr>
  56. <td><a href="http://my.netscape.com">Navigator</a></td>
  57. </tr>
  58. </table>
  59. </span>
  60.  
  61. <br />
  62.  
  63. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  64. <table width="100%">
  65. <tr>
  66. <td width="90%"><a href="http://www.altavista.com">AltaVista</a></td>
  67. <td rowspan="2">C</td>
  68. </tr><tr>
  69. <td><a href="http://www.yahoo.com">Yahoo!</a></td>
  70. </tr>
  71. </table>
  72. </span>
  73.  
  74. </body>
  75. </html>