Posted By

paulgrenwood on 09/23/09


Tagged

css menu dropdown


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

WinterCrow
sdpfost


CSS Dropdown Menu


 / Published in: CSS
 

  1. //==== HTML =====
  2.  
  3. <div>
  4. <h1>JankoAtWarpSpeed demos</h1>
  5. <ul>
  6.  
  7. <li><span>Menu 1</span>
  8. <ul>
  9. <li><a href="#">Menu item 1</a></li>
  10. <li><a href="#">Menu item 2</a></li>
  11. <li><a href="#">Menu item 3</a></li>
  12. </ul>
  13. </li>
  14.  
  15. <li><span>Menu 2</span>
  16. <ul>
  17. <li><a href="#">Menu item 1</a></li>
  18. <li><a href="#">Menu item 2</a></li>
  19. <li><a href="#">Menu item 3</a></li>
  20. </ul>
  21. </li>
  22. <li><span>Menu 3</span>
  23.  
  24. <ul>
  25. <li><a href="#">Menu item 1</a></li>
  26. <li><a href="#">Menu item 2</a></li>
  27. <li><a href="#">Menu item 3</a></li>
  28. </ul>
  29. </li>
  30. </ul>
  31.  
  32. </div>
  33.  
  34.  
  35.  
  36. //==== CSS =======
  37.  
  38. body { font-family:Arial, Sans-Serif; font-size:13px; margin:0px;
  39. background: transparent url(page_bkg.png) repeat scroll top center;}
  40. h1 {margin:0px; padding:20px 0 0 20px;}
  41. p {padding:20px; color:#dcdcdc;}
  42. p a {color:#9BD800;}
  43. p a:hover {color:#B6FF00;}
  44. #header { height:120px; position:relative;
  45. background: transparent url(header_bkg.png) repeat-x scroll top center;}
  46. #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
  47. #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
  48. position:relative; padding:10px; width:100px;}
  49. #nav > li:hover ul { display:block; }
  50. #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
  51.  
  52. #nav li ul { margin:0px; padding:0px; display:none;}
  53. #nav li ul li { list-style-type:none; margin:10px 0 0 0;}
  54. #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
  55. #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
  56. #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Report this snippet  

You need to login to post a comment.