1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <title>test</title> 
  5. <meta http-equvie="content-type" content="text/html"; charset="utf-8" /> 
  6. <style type="text/css"> 
  7. body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial'} 
  8. #mainNavBar{ 
  9. width:100%; 
  10. background:#999; 
  11. padding:10px 0; 
  12. } 
  13. #nav{ 
  14. width:760px; 
  15. height:30px; 
  16. margin:0 auto; 
  17. } 
  18. #nav ul{ 
  19. padding:0; 
  20. margin:0; 
  21. } 
  22. #nav ul li{ 
  23. position:relative; 
  24. float:left; 
  25. width:60px; 
  26. height:30px; 
  27. line-height:30px; 
  28. overflow:hidden; 
  29. list-style-type:none; 
  30. } 
  31. #nav ul li a{display:block;color:#fff;text-decoration:none;} 
  32. #nav ul li a:hover{font-weight:bold;background:#666;} 
  33.  
  34. #subNav{ 
  35. position:absolute; 
  36. width:150px; 
  37. top:30px; 
  38. left:0px; 
  39. padding:5px; 
  40. background:#666; 
  41. color:#fff; 
  42. text-align:left; 
  43. } 
  44. #subNav a{text-decoration:none;font-weight:normal;display:block;} 
  45. #subNav a:hover{color:#f00;background:#f00} 
  46. </style> 
  47. </head> 
  48. <body> 
  49. <div id="mainNavBar"> 
  50. <div id="nav"> 
  51.    <ul> 
  52.    <li> 
  53.     <a href="#">Add</a> 
  54.     <div id="subNav"> 
  55.      <a href="#">写日志</a> 
  56.      <a href="#">增加分类</a> 
  57.     </div> 
  58.    </li> 
  59.    <li> 
  60.     <a href="#">Edit</a> 
  61.     <div id="subNav"> 
  62.      <a href="#">修改分类</a> 
  63.      <a href="#">文章编辑</a> 
  64.     </div> 
  65.    </li> 
  66.    <li> 
  67.     <a href="#">Admin</a> 
  68.     <div id="subNav"> 
  69.      <a href="#">文章管理</a> 
  70.      <a href="#">评论管理</a> 
  71.      <a href="#">留言管理</a> 
  72.      <a href="#">退出</a> 
  73.     </div> 
  74.    </li> 
  75.    </ul> 
  76. </div> 
  77. </div> 
  78. <script language="javascript"> 
  79. var nav=document.getElementById("nav").getElementsByTagName("li"); 
  80. for(i=0;i<nav.length;i++){ 
  81. nav[i].onmouseover=function(){ 
  82. this.style.fontWeight="bold"; 
  83. this.style.overflow="visible"; 
  84. this.style.background="#666666"; 
  85. } 
  86. nav[i].onmouseout=function(){ 
  87. this.style.fontWeight="normal"; 
  88. this.style.background="#999999" 
  89. this.style.overflow="hidden"; 
  90. } 
  91. } 
  92. </script> 
  93. </body> 
  94. </html>