Pure CSS multi-level drop-down menu

Question

I haven t done a lot of work with multi-level  pure CSS drop-down menus before  but I m now looking for the cleanest possible method that is out there  When I ve searched for this online I ve found a lot of solutions that were 4-5 years old and I m not sure whether there are better ways to achieve this than to do something like this

User · Answer

lt div class  example  align  center  gt       lt div class  menuholder  gt           lt ul class  menu slide  gt               lt li gt  lt a href  index php id 1  class  blue  gt Home lt  a gt  lt  li gt           lt li gt  lt a href  index php id 14  class  blue  gt About Us lt  a gt  lt  li gt               lt li gt  lt a href  index php id 4  class  blue  gt Mens lt  a gt                   lt div class  subs  gt                       lt dl gt                           lt dd gt  lt a href  index php id 15  gt Coats  amp  Jackets lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 22  gt Chinos lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 23  gt Jeans lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 24  gt Jumpers  amp  Cardigans lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 25  gt Linen lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                           lt dd gt  lt a href  index php id 26  gt Polo Shirts lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 16  gt Shirts Casual lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 27  gt Shirts Formal lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 28  gt Shorts lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 18  gt Sportswear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                           lt dd gt  lt a href  index php id 19  gt Tops  amp  T-Shirts lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 20  gt Trousers Casual lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 29  gt Trousers Formal lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 30  gt Nightwear lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 17  gt Socks lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                           lt dd gt  lt a href  index php id 21  gt Underwear lt  a gt  lt  dd gt                           lt dd gt  lt a href  index php id 31  gt Swimwear lt  a gt  lt  dd gt                       lt  dl gt                   lt  div gt               lt  li gt               lt  --menu-- gt                           lt li gt  lt a href  index php id 5  class  blue  gt Ladie s lt  a gt                   lt div class  subs  gt                       lt dl gt                             lt dd gt  lt a href  index php id 32  gt Coats  amp  Jackets lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 33  gt Dresses lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 34  gt Jeans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 35  gt Jumpers  amp  Cardigans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 36  gt Jumpsuits lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                           lt dd gt  lt a href  index php id 37  gt Leggings  amp  Jeggings lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 38  gt Linen lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 39  gt Lingerie  amp  Underwear lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 40  gt Maternity Wear lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 41  gt Nightwear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                        lt dd gt  lt a href  index php id 42  gt Shorts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 43  gt Skirts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 44  gt Sportswear lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 45  gt Suits  amp  Tailoring lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 46  gt Swimwear  amp  Beachwear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                             lt dd gt  lt a href  index php id 47  gt Thermals lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 48  gt Tops  amp  T-Shirts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 49  gt Trousers  amp  Chinos lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 50  gt Socks lt  a gt  lt  dd gt                       lt  dl gt                   lt  div gt               lt  li gt  lt  --menu end-- gt                           lt  --menu-- gt                           lt li gt  lt a href  index php id 7  class  blue  gt Girls lt  a gt                   lt div class  subs  gt                       lt dl gt                               lt dd gt  lt a href  index php id 51  gt Coats  amp  Jackets lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 52  gt Dresses lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 53  gt Jeans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 54  gt Joggers  amp  Sweatshirts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 55  gt Jumpers  amp  Cardigans lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                                   lt dd gt  lt a href  index php id 56  gt Jumpsuits  amp  Playsuits lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 57  gt Leggings lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 58  gt Nightwear lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 59  gt Shorts lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 60  gt Skirts lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                                 lt dd gt  lt a href  index php id 61  gt Swimwear lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 62  gt Tops  amp  T-Shirts lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 63  gt Trousers  amp  Jeans lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 64  gt Socks lt  a gt  lt  dd gt                                 lt dd gt  lt a href  index php id 65  gt Underwear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                        lt  dl gt                   lt  div gt               lt  li gt  lt  --menu end-- gt                               lt  --menu-- gt                           lt li gt  lt a href  index php id 8  class  blue  gt Boys lt  a gt                   lt div class  subs  gt                       lt dl gt                           lt dd gt  lt a href  index php id 66  gt Coats  amp  Jackets lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 67  gt Jeans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 68  gt Joggers  amp  Sweatshirts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 69  gt Jumpers  amp  Cardigans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 70  gt Nightwear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                               lt dd gt  lt a href  index php id 71  gt Shirts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 72  gt Shorts lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 73  gt Sportswear lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 74  gt Swimwear lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 75  gt T-Shirts  amp  Polo Shirts lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                             lt dd gt  lt a href  index php id 76  gt Trousers  amp  Jeans lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 77  gt Socks lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 78  gt Underwear lt  a gt  lt  dd gt                       lt  dl gt                       lt dl gt                        lt  dl gt                   lt  div gt               lt  li gt  lt  --menu end-- gt               lt  --menu-- gt                lt li gt  lt a href  index php id 9  class  blue  gt Toddlers lt  a gt                   lt div class  subs  gt                       lt dl gt                         lt dd gt  lt a href  index php id 79  gt Newborn lt  a gt  lt  dd gt                         lt dd gt  lt a href  index php id 80  gt 0-2 Years lt  a gt  lt  dd gt                       lt  dl gt                                    lt  div gt               lt  li gt  lt  --menu end-- gt               lt  --menu-- gt                lt li gt  lt a href  index php id 10  class  blue  gt Accessories lt  a gt                   lt div class  subs  gt                       lt dl gt                             lt dd gt  lt a href  index php id 81  gt Shoes lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 82  gt Ties lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 83  gt Caps lt  a gt  lt  dd gt                             lt dd gt  lt a href  index php id 84  gt Belts lt  a gt  lt  dd gt                       lt  dl gt                                    lt  div gt               lt  li gt  lt  --menu end-- gt               lt li gt  lt a href  index php id 13  class  blue  gt Contact Us lt  a gt  lt  li gt           lt  ul gt           lt div class  back  gt  lt  div gt           lt div class  shadow  gt  lt  div gt       lt  div gt       lt div style  clear both  gt  lt  div gt   lt  div gt    CSS 3 Coding- Copy and Paste   lt style gt   body margin 0px    example       width 980px      height 40px      margin 0px auto   position absolute   margin-bottom 60px   top 95px      menuholder       float left      font normal bold 11px 35px verdana  sans-serif      overflow hidden      position relative     menuholder  shadow       -moz-box-shadow 0 0 20px rgba 0  0  0  1       -o-box-shadow 0 0 20px rgba 0  0  0  1       -webkit-box-shadow 0 0 20px rgba 0  0  0  1       background  888      box-shadow 0 0 20px rgba 0  0  0  1       height 10px      left 5       position absolute      top -9px      width 100       z-index 100     menuholder  back       -moz-transition-duration  4s      -o-transition-duration  4s      -webkit-transition-duration  4s      background-color rgba 0  0  0  0 88       height 0      width 980px    100       menuholder hover div back       height 280px    ul menu       display block      float left      list-style none      margin 0      padding 0 125px      position relative    ul menu li       float left      margin 0 10px 0 0    ul menu li  gt  a       -moz-border-radius 0 0 10px 10px      -moz-box-shadow 2px 2px 4px rgba 0  0  0  0 9       -moz-transition all 0 3s ease-in-out      -o-border-radius 0 0 10px 10px      -o-box-shadow 2px 2px 4px rgba 0  0  0  0 9       -o-transition all 0 3s ease-in-out      -webkit-border-bottom-left-radius 10px      -webkit-border-bottom-right-radius 10px      -webkit-box-shadow 2px 2px 4px rgba 0  0  0  0 9       -webkit-transition all 0 3s ease-in-out      border-radius 0 0 10px 10px      box-shadow 2px 2px 4px rgba 0  0  0  0 9       color  eee      display block      padding 0 10px      text-decoration none      transition all 0 3s ease-in-out    ul menu li a red       background  a00    ul menu li a orange       background  da0    ul menu li a yellow       background  aa0    ul menu li a green       background  060    ul menu li a blue       background  073263    ul menu li a violet       background  682bc2     menu li div subs       left 0      overflow hidden      position absolute      top 35px      width 0     menu li div subs dl       -moz-transition-duration  2s      -o-transition-duration  2s      -webkit-transition-duration  2s      float left      margin 0 130px 0 0      overflow hidden      padding 40px 0 5  2       width 0     menu dt       color  fc0      font-family arial  sans-serif      font-size 12px      font-weight 700      height 20px      line-height 20px      margin 0      padding 0 0 0 10px      white-space nowrap     menu dd       margin 0      padding 0      text-align left     menu dd a       background transparent      color  fff      font-size 12px      height 20px      line-height 20px      padding 0 0 0 10px      text-align left      white-space nowrap      width 80px     menu dd a hover       color  fc0     menu li hover div subs dl       -moz-transition-delay 0 2s      -o-transition-delay 0 2s      -webkit-transition-delay 0 2s      margin-right 2       width 21     ul menu li hover  gt  a ul menu li  gt  a hover       background  aaa      color  fff      padding 10px 10px 0    ul menu li a red hover ul menu li hover a red       background  c00    ul menu li a orange hover ul menu li hover a orange       background  fc0    ul menu li a yellow hover ul menu li hover a yellow       background  cc0    ul menu li a green hover ul menu li hover a green       background  080    ul menu li a blue hover ul menu li hover a blue       background  00c    ul menu li a violet hover ul menu li hover a violet   background  8a2be2     menu li hover div subs  menu li a hover div subs       width 100

User · Answer

I needed a multilevel dropdown menu in css  I couldn t find an error-free menu that I searched  Then I created a menu instance using the Css hover transition effect I hope it will be useful for users   Css codes   AnaMenu   width  920px                Menu width    height  30px               Menu height    position  relative  background   0080ff  margin 0 0 0 -30px  padding  10px 0 0 15px  border  0                   nav   display block background transparent  margin 0 padding  0 border  0    nav ul   float  none  display block  height 35px   margin 16px 0 0 0 border 0  padding  15px 0 3px 0   overflow  visible      nav ul li border 0    nav li a   nav li a link   nav li a visited  height 23px  -webkit-transition  background-color 1s ease-out  -moz-transition  background-color 1s ease-out  -o-transition  background-color 1s ease-out  transition  background-color 1s ease-out  color   fff                                   Change colour of link    display  block border 0 border-right 1px solid  efefef text-decoration none  margin  0 letter-spacing 0 6px  padding  2px 10px 2px 10px                  nav li a hover   nav li a active   color   fff    margin  0 background  6ab5ff border 0  padding  2px 10px 2px 10px           nav li li a   nav li li a link   nav li li a visited   background   fafafa        width  200px  color   05429b               Link text color    float  none  margin  0 border-bottom 1px solid  9be6e9  padding  8px 15px             nav li li a hover   nav li li a active   background   2793ff            Mouse hover color    color   fff                 padding  8px 15px border 0  text-decoration none   nav li  float  none  display  inline-block margin  0  padding  0  border  0    nav li ul   z-index  9999  position  absolute  left  -999em  height  auto  width  200px  margin  0  padding  0 background transparent   nav li ul a   width  170px border 0 text-decoration none font-size 14px     nav li ul ul   margin  -40px 0 0 230px    nav li hover ul ul   nav li hover ul ul ul   nav li sfhover ul ul   nav li sfhover ul ul ul  left  -999em      nav li hover ul   nav li li hover ul   nav li li li hover ul   nav li sfhover ul   nav li li sfhover ul   nav li li li sfhover ul   left  auto      nav li hover   nav li sfhover  position  static    Multilevel dropdown menu can be used in Blogger blogs  Details at   Css multilevel dropdown menu

User · Answer

Here are a couple good sites to check out for that   http   www tripwiremagazine com 2011 10 css-menu-and-navigation html  Lots of examples   http   webdesignerwall com tutorials css3-dropdown-menu  1 example more tutorial like   Hope this is helpful information

User · Answer

For a menu which responds to click events as opposed to just hover  and acts in a similar way to a select control     Pure CSS Select Menu  HTML   lt ul tabindex  0  gt       lt li gt           lt input id  item1  type  radio  name  item  checked  true    gt           lt label for  item1  gt Item 1 lt  label gt       lt  li gt       lt li gt           lt input id  item2  type  radio  name  item    gt           lt label for  item2  gt Item 2 lt  label gt       lt  li gt       lt li gt           lt input id  item3  type  radio  name  item    gt           lt label for  item3  gt Item 3 lt  label gt       lt  li gt   lt  ul gt    CSS  ul  li       list-style none      margin 0      padding 0    li input       display none    ul not  focus  input not  checked   ul not  focus  input not  checked    label       display none    input checked label       color red

User · Answer

x000D   x000D   third-level-menu x000D    x000D      position  absolute  x000D      top  0  x000D      right  -150px  x000D      width  150px  x000D      list-style  none  x000D      padding  0  x000D      margin  0  x000D      display  none  x000D    x000D   x000D   third-level-menu  gt  li x000D    x000D      height  30px  x000D      background   999999  x000D    x000D   third-level-menu  gt  li hover   background   CCCCCC    x000D   x000D   second-level-menu x000D    x000D      position  absolute  x000D      top  30px  x000D      left  0  x000D      width  150px  x000D      list-style  none  x000D      padding  0  x000D      margin  0  x000D      display  none  x000D    x000D   x000D   second-level-menu  gt  li x000D    x000D      position  relative  x000D      height  30px  x000D      background   999999  x000D    x000D   second-level-menu  gt  li hover   background   CCCCCC    x000D   x000D   top-level-menu x000D    x000D      list-style  none  x000D      padding  0  x000D      margin  0  x000D    x000D   x000D   top-level-menu  gt  li x000D    x000D      position  relative  x000D      float  left  x000D      height  30px  x000D      width  150px  x000D      background   999999  x000D    x000D   top-level-menu  gt  li hover   background   CCCCCC    x000D   x000D   top-level-menu li hover  gt  ul x000D    x000D         On hover  display the next level s menu    x000D      display  inline  x000D    x000D   x000D   x000D     Menu Link Styles    x000D   x000D   top-level-menu a    Apply to all links inside the multi-level menu    x000D    x000D      font  bold 14px Arial  Helvetica  sans-serif  x000D      color   FFFFFF  x000D      text-decoration  none  x000D      padding  0 0 0 10px  x000D   x000D         Make the link cover the entire list item-container    x000D      display  block  x000D      line-height  30px  x000D    x000D   top-level-menu a hover   color   000000    x000D   lt ul class  top-level-menu  gt  x000D       lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Services lt  a gt  lt  li gt  x000D       lt li gt  x000D           lt a href     gt Offices lt  a gt  x000D           lt ul class  second-level-menu  gt  x000D               lt li gt  lt a href     gt Chicago lt  a gt  lt  li gt  x000D               lt li gt  lt a href     gt Los Angeles lt  a gt  lt  li gt  x000D               lt li gt  x000D                   lt a href     gt New York lt  a gt  x000D                   lt ul class  third-level-menu  gt  x000D                       lt li gt  lt a href     gt Information lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt Book a Meeting lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt Testimonials lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt Jobs lt  a gt  lt  li gt  x000D                   lt  ul gt  x000D               lt  li gt  x000D               lt li gt  lt a href     gt Seattle lt  a gt  lt  li gt  x000D           lt  ul gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Contact lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D     I have also put together a live demo that s available to play with HERE

[html] Pure CSS multi-level drop-down menu

Examples related to html

Examples related to css

Examples related to drop-down-menu