Create dropdown menus with CSS only


/ Published in: CSS
Save to your folder(s)

Doesn't work in IE6


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>JankoAtWarpSpeed demos: Create dropdown menus with CSS only</title>
  5. <style type="text/css">
  6. body { font-family:Arial, Sans-Serif; font-size:13px; margin:0px;
  7. background: transparent url(page_bkg.png) repeat scroll top center;}
  8. h1 {margin:0px; padding:20px 0 0 20px;}
  9. p {padding:20px; color:#dcdcdc;}
  10. p a {color:#9BD800;}
  11. p a:hover {color:#B6FF00;}
  12. #header { height:120px; position:relative;
  13. background: transparent url(header_bkg.png) repeat-x scroll top center;}
  14. #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
  15. #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
  16. position:relative; padding:10px; width:100px;}
  17. #nav > li:hover ul { display:block; }
  18. #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
  19.  
  20. #nav li ul { margin:0px; padding:0px; display:none;}
  21. #nav li ul li { list-style-type:none; margin:10px 0 0 0;}
  22. #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
  23. #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
  24. #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="header">
  29. <h1>JankoAtWarpSpeed demos</h1>
  30. <ul id="nav">
  31.  
  32. <li><span>Menu 1</span>
  33. <ul>
  34. <li><a href="#">Menu item 1</a></li>
  35. <li><a href="#">Menu item 2</a></li>
  36. <li><a href="#">Menu item 3</a></li>
  37. </ul>
  38. </li>
  39.  
  40. <li><span>Menu 2</span>
  41. <ul>
  42. <li><a href="#">Menu item 1</a></li>
  43. <li><a href="#">Menu item 2</a></li>
  44. <li><a href="#">Menu item 3</a></li>
  45. </ul>
  46. </li>
  47. <li><span>Menu 3</span>
  48.  
  49. <ul>
  50. <li><a href="#">Menu item 1</a></li>
  51. <li><a href="#">Menu item 2</a></li>
  52. <li><a href="#">Menu item 3</a></li>
  53. </ul>
  54. </li>
  55. </ul>
  56.  
  57. </div>
  58. <p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx">Create dropdown menus with CSS only</a></p>
  59. </body>
  60. </html>

URL: http://www.jankoatwarpspeed.com/examples/drop-down-list-menus/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.