2 level dropdown menu


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



Copy this code and paste it in your HTML
  1. ul { /* all lists */
  2. padding: 0;
  3. margin: 0;
  4. list-style: none;
  5. }
  6.  
  7. li { /* all list items */
  8. float: left;
  9. position: relative;
  10. width: 10em;
  11. }
  12.  
  13. li ul { /* second-level lists */
  14. display: none;
  15. position: absolute;
  16. top: 1em;
  17. left: 0;
  18. }
  19.  
  20. li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
  21. top: auto;
  22. left: auto;
  23. }
  24.  
  25. li:hover ul, li.over ul { /* lists nested under hovered list items */
  26. display: block;
  27. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.