js 드 롭 다운 메뉴

14636 단어 js

  
  
  
  
  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. #nav{ 
  13. width:760px; 
  14. height:30px; 
  15. margin:0 auto; 
  16. #nav ul{ 
  17. padding:0; 
  18. margin:0; 
  19. #nav ul li{ 
  20. position:relative; 
  21. float:left; 
  22. width:60px; 
  23. height:30px; 
  24. line-height:30px; 
  25. overflow:hidden; 
  26. list-style-type:none; 
  27. #nav ul li a{display:block;color:#fff;text-decoration:none;} 
  28. #nav ul li a:hover{font-weight:bold;background:#666;} 
  29.  
  30. #subNav{ 
  31. position:absolute; 
  32. width:150px; 
  33. top:30px; 
  34. left:0px; 
  35. padding:5px; 
  36. background:#666; 
  37. color:#fff; 
  38. text-align:left; 
  39. #subNav a{text-decoration:none;font-weight:normal;display:block;} 
  40. #subNav a:hover{color:#f00;background:#f00} 
  41. </style> 
  42. </head> 
  43. <body> 
  44. <div id="mainNavBar"> 
  45. <div id="nav"> 
  46.    <ul> 
  47.    <li> 
  48.     <a href="#">Add</a> 
  49.     <div id="subNav"> 
  50.      <a href="#"> </a> 
  51.      <a href="#"> </a> 
  52.     </div> 
  53.    </li> 
  54.    <li> 
  55.     <a href="#">Edit</a> 
  56.     <div id="subNav"> 
  57.      <a href="#"> </a> 
  58.      <a href="#"> </a> 
  59.     </div> 
  60.    </li> 
  61.    <li> 
  62.     <a href="#">Admin</a> 
  63.     <div id="subNav"> 
  64.      <a href="#"> </a> 
  65.      <a href="#"> </a> 
  66.      <a href="#"> </a> 
  67.      <a href="#"> </a> 
  68.     </div> 
  69.    </li> 
  70.    </ul> 
  71. </div> 
  72. </div> 
  73. <script language="javascript"> 
  74. var nav=document.getElementById("nav").getElementsByTagName("li"); 
  75. for(i=0;i<nav.length;i++){ 
  76. nav[i].onmouseover=function(){ 
  77. this.style.fontWeight="bold"
  78. this.style.overflow="visible"
  79. this.style.background="#666666"
  80. nav[i].onmouseout=function(){ 
  81. this.style.fontWeight="normal"
  82. this.style.background="#999999" 
  83. this.style.overflow="hidden"
  84. </script> 
  85. </body> 
  86. </html> 

좋은 웹페이지 즐겨찾기