顶部导航

  1. <html>
  2. <head>
  3. <style>
  4. span
  5. {
  6. border:groove 2px;
  7. padding:3px;
  8. font-family:arial;
  9. font-size:12px;
  10. width:100px;
  11. height:70px;
  12. background-color:#c0c0c0;
  13. position:relative;
  14. top:-80px;
  15. left:-10px;
  16. }
  17. </style>
  18. <script type="text/javascript">
  19. function showmenu(elmnt)
  20. {
  21. elmnt.style.top="-15px"
  22. }
  23. function hidemenu(elmnt)
  24. {
  25. elmnt.style.top="-80px"
  26. }
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  32. <a href="/index.html">首页</a><br />
  33. <a href="/js/index.asp">JavaScript</a><br /><br /><hr />
  34. jishuchi<br />
  35. </span>
  36. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  37. <p></p>
  38. <p></p>
  39. <p>
  40. <a href="http://www.microsoft.com">Explorer</a><br />
  41. <a href="http://my.netscape.com">Navigator</a><br /><br /></p>
  42. <hr />
  43. 浏览器<br />
  44. </span>
  45. <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
  46. <p></p>
  47. <p></p>
  48. <p>
  49. <a href="http://www.altavista.com">Alta Vista</a><br />
  50. <a href="http://www.yahoo.com">Yahoo!</a><br /><br /></p>
  51. <hr />
  52. 搜索<br />
  53. </span>
  54. </body>
  55. </html>