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 · Accepted 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

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

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

<ul tabindex='0'>
    <li>
        <input id='item1' type='radio' name='item' checked='true' />
        <label for='item1'>Item 1</label>
    </li>
    <li>
        <input id='item2' type='radio' name='item' />
        <label for='item2'>Item 2</label>
    </li>
    <li>
        <input id='item3' type='radio' name='item' />
        <label for='item3'>Item 3</label>
    </li>
</ul>

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

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

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

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

The answer is

Pure CSS Select Menu

Examples related to html

Examples related to css

Examples related to drop-down-menu

Tags