Advanced Search

CSS Dropdown Menu

/ Published in: CSS
Save to your folder(s)
A working HTML/CSS dropdown (flyout) menu.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .dropdown {
  3. height:40px;
  4. }
  5.  
  6. .dropdown ul {
  7. list-style-type:none;
  8. margin:0;
  9. padding:0;
  10. }
  11.  
  12. .dropdown ul li {
  13. display:block;
  14. float:right;
  15. position:relative;
  16. }
  17.  
  18. .dropdown ul li a {
  19. text-decoration: none;
  20. display:block;
  21. background:#e3e3e3;
  22. border-bottom:1px solid #ccc;
  23. color:#444;
  24. display:block;
  25. float:left;
  26. font-weight:bold;
  27. padding:10px 16px;
  28. padding:11px 16px\9; /* IE9 and below */  
  29. *padding:10px 16px; /* IE7 and below */
  30. }
  31.  
  32. .dropdown ul li a:hover {
  33. background:#d1e4f8;
  34. color:#000;
  35. text-decoration:none;
  36. }
  37.  
  38. .dropdown ul li:hover ul.children {
  39. display:block;
  40. position:absolute;
  41. top:36px;
  42. right:0;
  43. }
  44.  
  45. ul.children {
  46. background:#8f714d;
  47. display:none;
  48. margin:0;
  49. width:184px;
  50. }
  51.  
  52. ul.children li {
  53. margin:0;
  54. }
  55.  
  56. ul.children a {
  57. border:none;
  58. width:200px;
  59. }
  60.  
  61. </style>
  62. <div class="dropdown">
  63.     <ul>
  64.         <li><a href="#">Login</a>
  65.             <ul class="children">
  66.                 <li><a href="#">Email</a></li>
  67.                 <li><a href="#">Students</a></li>
  68.                 <li><a href="#">Staff</a></li>
  69.                 <li><a href="#">Clients</a></li>
  70.                 <li><a href="#">File Storage</a></li>
  71.             </ul>
  72.         </li>
  73.     </ul>
  74. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.