Pure CSS Dropdown Menu

This is about creating drop down menu without any script. This can also be created by using pure CSS.

Basically there are two ul list are used to create the drop down menu. First ul list contains the parent menu and the second ul contains the child menu links.

Here is the code

HTML

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">About 1</a></li>
    <li><a href="">About link 2</a></li>
    <li><a href="">About 3</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Product 1</a></li>
    <li><a href="">Product 2</a></li>
    <li><a href="">Product 3</a></li>
    <li><a href="">Product 4</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Contact 1</a></li>
    <li><a href="">Contact 2</a></li>
    <li><a href="">Contact 3</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 {   
    width:80px; 
    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; /*This opens the hidden ul list*/  
       position: absolute; 
} 
li:hover li {   
       float: none;   
       font-size: 11px;
 } 
li:hover a { 
       background: #617F8A; 
} 
li:hover li a:hover {
       background: #95A9B1; 
}​

Check the demo here.

Browser compatibility : This works in IE7+ and all the modern browsers.