How to make a pure css based dropdown menu?

by

see this is pure css bases dropdown menu:-

HTML

<ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>

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/

More Related Contents:

  1. How to style the option of an html “select” element?
  2. Change Select List Option background colour on hover
  3. Drop-down menu that opens up/upward with pure css
  4. Pure CSS multi-level drop-down menu
  5. Word wrap options in a select list
  6. How to remove the default arrow icon from a dropdown list (select element)?
  7. How to hide drop down arrow in IE8 & IE9?
  8. How to change font-family of drop down’s list item?
  9. How can change width of dropdown list?
  10. How to get horizontal scroll bar in select box in IE?
  11. How to collect and manipulate data in HTML using
  12. SVG drop shadow using css3
  13. border curved css – circle with curved end
  14. What is DOM reflow?
  15. CSS background-image-opacity?
  16. Why anchor tag does not take height and width of its containing element
  17. How to go up a level in the src path of a URL in HTML?
  18. left-right movement.. css only very generic
  19. How to disable CSS in Browser for testing purposes
  20. How to change an image on click using CSS alone?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How to center multiple divs inside a container in CSS
  23. CSS – Sticky footer [duplicate]
  24. Two div blocks on same line
  25. Auto height on parent container with Absolute/Fixed Children
  26. Display text, a dotted line then more text spanning the width of the page
  27. How can I control the width of a label tag?
  28. How to change cursor color without changing text color?
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment