Advanced Search

Multilevel dropdown menu in puer CSS

/ Published in: CSS
Save to your folder(s)
container id: nav
list class: dropdown-menu

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* DROPDOWN MENU */
  2. /* !! dont insert fonts and colors here */
  3.  
  4. .dropdown-menu li{
  5.     float: left;
  6.     position: relative;
  7. }
  8. /* 2 level */
  9. .dropdown-menu li ul{
  10.     display: none;
  11.     position: absolute;
  12.     top: 30px; /* height of first level bar */
  13.     left: 0px;
  14. }
  15. .dropdown-menu li ul li{
  16.     float: none;
  17. }
  18. .dropdown-menu li ul li ul{
  19.     left: 120px; /* width 2+ level */
  20.     top: 0;
  21. }
  22. .dropdown-menu li:hover ul {/*show 2+ level*/
  23.     display: block;
  24. }
  25. .dropdown-menu li:hover ul li ul{/*hide 3+ level*/
  26.     display: none;
  27. }
  28. .dropdown-menu li ul li:hover ul{
  29.     display: block;
  30. }
  31. .dropdown-menu li ul li:hover ul li ul{
  32.     display: none;
  33. }
  34. .dropdown-menu li ul li ul li:hover ul{
  35.     display: block;
  36. }
  37. .dropdown-menu li ul li ul li:hover ul li ul{
  38.     display: none;
  39. }
  40. /* DROPDOWN MENU - end */
  41.  
  42. /* view - like u wish */
  43. #nav{
  44.     width: 950px;
  45.     height: 30px;
  46.     margin: 0 auto;
  47.     background: #ccc;
  48. }
  49. #nav ul li{
  50.     line-height: 30px;
  51.     height: 30px;
  52. }
  53. #nav ul ul{
  54.     background: #bbb;
  55. }
  56. #nav ul ul ul{
  57.     background: #aaa;
  58. }
  59. #nav ul ul ul ul{
  60.     background: #999;
  61. }
  62. #nav ul li ul li{
  63.     width: 120px;
  64.  
  65. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.