Multilevel dropdown menu in puer CSS


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

container id: nav
list class: dropdown-menu


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.