How to make a pure css based dropdown menu

Question

I am looking horizontal dropdown menu pure css based and browser compatible      i am looking like mentioned below example

User · Answer

x000D   x000D  html  body   x000D      font-family  Arial  Helvetica  sans-serif  x000D    x000D   x000D     define a fixed width for the entire menu    x000D   navigation   x000D    width  150px  x000D    x000D   x000D     reset our lists to remove bullet points and padding    x000D   mainmenu   submenu   x000D    list-style  none  x000D    padding  0  x000D    margin  0  x000D    x000D   x000D     make ALL links  main and submenu  have padding and background color    x000D   mainmenu a   x000D    display  block  x000D    background-color   CCC  x000D    text-decoration  none  x000D    padding  10px  x000D    color   000  x000D    x000D   x000D     add hover behaviour    x000D   mainmenu a hover   x000D      background-color   C5C5C5  x000D    x000D   x000D   x000D     when hovering over a  mainmenu item  x000D    display the submenu inside it  x000D    we re changing the submenu s max-height from 0 to 200px  x000D     x000D   x000D   mainmenu li hover  submenu   x000D    display  block  x000D    max-height  200px  x000D    x000D   x000D     x000D    we now overwrite the background-color for  submenu links only  x000D    CSS reads down the page  so code at the bottom will overwrite the code at the top  x000D     x000D   x000D   submenu a   x000D    background-color   999  x000D    x000D   x000D     hover behaviour for links inside  submenu    x000D   submenu a hover   x000D    background-color   666  x000D    x000D   x000D     this is the initial state of all submenus  x000D    we set it to max-height  0  and hide the overflowed content  x000D     x000D   submenu   x000D    overflow  hidden  x000D    max-height  0  x000D    -webkit-transition  all 0 5s ease-out  x000D    x000D   lt html gt  x000D   lt body gt  x000D   lt head gt  x000D   lt link rel  stylesheet  type  css text  href  nav css  gt  x000D   lt  head gt  x000D   lt  body gt  x000D   lt nav class  navigation  gt  x000D     lt ul class  mainmenu  gt  x000D       lt li gt  lt a href    gt Home lt  a gt  lt  li gt  x000D       lt li gt  lt a href    gt About lt  a gt  lt  li gt  x000D       lt li gt  lt a href    gt Products lt  a gt  x000D         lt ul class  submenu  gt  x000D           lt li gt  lt a href    gt Tops lt  a gt  lt  li gt  x000D           lt li gt  lt a href    gt Bottoms lt  a gt  lt  li gt  x000D           lt li gt  lt a href    gt Footwear lt  a gt  lt  li gt  x000D         lt  ul gt  x000D       lt  li gt  x000D       lt li gt  lt a href    gt Contact us lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

Create simple drop-down menu using HTML and CSS  CSS    lt style gt   dropdown       position  relative      display  inline-block      dropdown-content       display  none      position  absolute      background-color   f9f9f9      min-width  160px      box-shadow  0px 8px 16px 0px rgba 0 0 0 0 2       padding  12px 16px      z-index  1      dropdown hover  dropdown-content       display  block     lt  style gt    and HTML    lt div class  dropdown  gt     lt span gt Mouse over me lt  span gt     lt div class  dropdown-content  gt       lt p gt Hello World  lt  p gt     lt  div gt   lt  div gt    View demo online

User · Answer

There is different ways to make dropdown menu using css  Here is simple code   HTML Code       lt label class  dropdown  gt      lt div class  dd-button  gt      Dropdown    lt  div gt      lt input type  checkbox  class  dd-input  id  test  gt      lt ul class  dd-menu  gt       lt li gt Dropdown 1 lt  li gt       lt li gt Dropdown 2 lt  li gt     lt  ul gt    lt  label gt    CSS Code  body     color   000000    font-family  Sans-Serif    padding  30px    background-color   f6f6f6     a     text-decoration  none    color   000000     a hover     color   222222       Dropdown      dropdown     display  inline-block    position  relative      dd-button     display  inline-block    border  1px solid gray    border-radius  4px    padding  10px 30px 10px 20px    background-color   ffffff    cursor  pointer    white-space  nowrap      dd-button after     content        position  absolute    top  50     right  15px    transform  translateY -50      width  0     height  0     border-left  5px solid transparent    border-right  5px solid transparent    border-top  5px solid black      dd-button hover     background-color   eeeeee       dd-input     display  none      dd-menu     position  absolute    top  100     border  1px solid  ccc    border-radius  4px    padding  0    margin  2px 0 0 0    box-shadow  0 0 6px 0 rgba 0 0 0 0 1     background-color   ffffff    list-style-type  none      dd-input    dd-menu     display  none       dd-input checked    dd-menu     display  block       dd-menu li     padding  10px 20px    cursor  pointer    white-space  nowrap      dd-menu li hover     background-color   f6f6f6      dd-menu li a     display  block    margin  -10px -20px    padding  10px 20px      dd-menu li divider    padding  0    border-bottom  1px solid  cccccc      More css code example

User · Answer

View code online on  WebCrafts org  HTML code     lt body id  body  gt   lt div id  navigation  gt       lt h2 gt          Pure CSS Drop-down Menu      lt  h2 gt     lt div id  nav  class  nav  gt       lt ul gt           lt li gt  lt a href     gt Menu1 lt  a gt  lt  li gt           lt li gt               lt a href     gt Menu2 lt  a gt             lt ul gt                   lt li gt  lt a href     gt Sub-Menu1 lt  a gt  lt  li gt                   lt li gt                       lt a href     gt Sub-Menu2 lt  a gt                     lt ul gt                           lt li gt  lt a href     gt Demo1 lt  a gt  lt  li gt                         lt li gt  lt a href     gt Demo2 lt  a gt  lt  li gt                       lt  ul gt                   lt  li gt                   lt li gt  lt a href     gt Sub-Menu3 lt  a gt  lt  li gt                   lt li gt  lt a href     gt Sub-Menu4 lt  a gt  lt  li gt               lt  ul gt           lt  li gt           lt li gt  lt a href     gt Menu3 lt  a gt  lt  li gt           lt li gt  lt a href     gt Menu4 lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  div gt   lt  body gt     Css code   body      background-color  111      navigation      text-align center     navigation h2      color  DDD      nav      display inline-block      z-index 5      font-weight bold     nav ul      width auto      list-style none      nav ul li      display inline-block      nav ul li a      text-decoration none      text-align center      color  222      display block      width 120px      line-height 30px      background-color gray      nav ul li a hover      background-color  EEC        nav ul li ul      margin-top 0px      padding-left 0px      position absolute      display none      nav ul li hover ul      display block      nav ul li ul li      display block      nav ul li ul li ul      margin-left 100       margin-top -30px      visibility hidden      nav ul li ul li hover ul      margin-left 100       visibility visible

User · Answer

see this is pure css bases dropdown menu -  HTML   lt ul id  menu  gt         lt li gt  lt a href    gt Home lt  a gt  lt  li gt         lt li gt  lt a href    gt About Us lt  a gt           lt ul gt           lt li gt  lt a href    gt The Team lt  a gt  lt  li gt           lt li gt  lt a href    gt History lt  a gt  lt  li gt           lt li gt  lt a href    gt Vision lt  a gt  lt  li gt           lt  ul gt         lt  li gt         lt li gt  lt a href    gt Products lt  a gt           lt ul gt           lt li gt  lt a href    gt Cozy Couch lt  a gt  lt  li gt           lt li gt  lt a href    gt Great Table lt  a gt  lt  li gt           lt li gt  lt a href    gt Small Chair lt  a gt  lt  li gt           lt li gt  lt a href    gt Shiny Shelf lt  a gt  lt  li gt           lt li gt  lt a href    gt Invisible Nothing lt  a gt  lt  li gt           lt  ul gt         lt  li gt         lt li gt  lt a href    gt Contact lt  a gt           lt ul gt           lt li gt  lt a href    gt Online lt  a gt  lt  li gt           lt li gt  lt a href    gt Right Here lt  a gt  lt  li gt           lt li gt  lt a href    gt Somewhere Else lt  a gt  lt  li gt           lt  ul gt         lt  li gt       lt  ul gt    CSS  ul       font-family  Arial  Verdana      font-size  14px      margin  0      padding  0      list-style  none     ul li       display  block      position  relative      float  left     li ul       display  none     ul li a        display  block      text-decoration  none      color   ffffff      border-top  1px solid  ffffff      padding  5px 15px 5px 15px      background   2C5463      margin-left  1px      white-space  nowrap     ul li a hover        background   617F8A    li hover ul        display  block      position  absolute     li hover li       float  none      font-size  11px     li hover a        background   617F8A     li hover li a hover        background   95A9B1      see the demo - http   jsfiddle net XPE3w 7

User · Answer

You don t have to always use ul elements to achieve that  you can use other elements too as seen below  Here there are 2 examples  one using div and one using select   This examples demonstrates the basic functionality  but can be extended enriched more  It is tested in linux only  iceweasel and chrome     lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset  UTF-8  gt   lt style gt   drop container     position relative    float left     always visible     background-color  FAFAFA    color  333333    font-weight bold    cursor pointer    border 2px silver solid    margin 0px    margin-right 5px    font-size 14px    font-family  Times New Roman   Times  serif     always visible hover    hidden container     display block    position absolute    color green     hidden container     display none    border 1px gray solid    left 0px    background-color  FAFAFA    padding 5px    z-index 1     hidden container hover     display block    position absolute     link     color blue    white-space nowrap    margin 3px    display block     link hover     color white    background-color blue     line 1     width 800px    border 1px tomato solid    padding 5px     lt  style gt         lt  head gt    lt body gt    lt div class  line 1  gt   lt div class  drop container  gt     lt select class  always visible  disabled gt  lt option gt Select lt  option gt  lt  select gt     lt div class  hidden container  gt     lt a href  http   www google gr  class  link  gt Option  1 lt  a gt     lt a href  http   www google gr  class  link  gt Option   2 lt  a gt     lt a href  http   www google gr  class  link  gt Option    3 lt  a gt     lt a href  http   www google gr  class  link  gt Option     4 lt  a gt     lt  div gt   lt  div gt   lt div class  drop container  gt     lt select class  always visible  disabled gt  lt option gt Select lt  option gt  lt  select gt     lt div class  hidden container  gt     lt a href  http   www google gr  class  link  gt     1 lt  a gt     lt a href  http   www google gr  class  link  gt    2 lt  a gt     lt a href  http   www google gr  class  link  gt   3 lt  a gt     lt a href  http   www google gr  class  link  gt  4 lt  a gt     lt  div gt   lt  div gt   lt div style  clear both   gt  lt  div gt   lt  div gt    lt br gt    lt div class  line 1  gt    lt div class  drop container  gt     lt div class  always visible  gt Select    lt  div gt     lt div class  hidden container  gt     lt a href  http   www google gr  class  link  gt Option  1 lt  a gt     lt a href  http   www google gr  class  link  gt Option   2 lt  a gt     lt a href  http   www google gr  class  link  gt Option    3 lt  a gt     lt a href  http   www google gr  class  link  gt Option     4 lt  a gt     lt  div gt   lt  div gt    lt div class  drop container  gt     lt div class  always visible  gt Select    lt  div gt     lt div class  hidden container  gt     lt a href  http   www google gr  class  link  gt Option  1 lt  a gt     lt a href  http   www google gr  class  link  gt Option   2 lt  a gt     lt a href  http   www google gr  class  link  gt Option    3 lt  a gt     lt a href  http   www google gr  class  link  gt Option     4 lt  a gt     lt  div gt   lt  div gt   lt div style  clear both   gt  lt  div gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

Tested in IE7 - 9 and Firefox  http   jsfiddle net WCaKg   Markup    lt ul gt       lt li gt  amp lt li amp gt  lt  li gt        lt li gt  amp lt li amp gt  lt  li gt        lt li gt  amp lt li amp gt            lt ul gt               lt li gt  amp lt li amp gt  lt  li gt                lt li gt  amp lt li amp gt  lt  li gt                lt li gt  amp lt li amp gt  lt  li gt                lt li gt  amp lt li amp gt  lt  li gt           lt  ul gt       lt  li gt        lt li gt  amp lt li amp gt  lt  li gt        lt li gt  amp lt li amp gt  lt  li gt        lt li gt  amp lt li amp gt  lt  li gt   lt  ul gt    CSS         margin  0    padding  0     body     font  200  1 5 Optima   Lucida Grande   Lucida   Lucida Sans Unicode   sans-serif     ul     width  9em    list-style-type  none    font-size  0 75em     li     float  left    margin  0 4px 4px 0    background   60c    background  rgba 102  0  204  0 66     border  4px solid  60c    color   fff    li hover     position  relative     ul ul     z-index  1    position  absolute    left  -999em    width  auto    background   ccc    background  rgba 204  204  204  0 33      li hover ul     top  2em    left  3px     li li     margin  0 0 3px 0    background   909    background  rgba 153  0  153  0 66     border  3px solid  909

[html] How to make a pure css based dropdown menu?

Examples related to html

Examples related to css

Examples related to drop-down-menu