Advanced Search

2 level dropdown menu

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

Expand | Embed | Plain Text

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.