SIMPLE DROPDOWN USING CSS AND HTML

It is the simple and basic level tutorial using css and html. Most of the people using some tools to create dropdown, but it is very simple and easy. I want to explain how to design simple drop down menu with CSS, HTML .Take a look at my code and enrich it into your projects.

DOWNLOAD CODE

HTML CODE:

<ul id="nav">
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HOME</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">WEB DESIGNING</a>
<ul>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">JQUERY</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HTML</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">AJAX</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">PROGRAMMING</a>
<ul>
<li><a href="http://javatyro.blogspot.com/" target="_blank">JAVA</a></li>
<li><a href="http://androidtyro.blogspot.com/" target="_blank">ANDROID</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">SHARE</a>
<ul>
<li><a href="http://facebook.com/siddhucse" target="_blank">FACEBOOK</a></li>
<li><a href="http://facebook.com/siddhuvydyas" target="_blank">TWITTER</a></li>
<li><a href="http://facebook.com/cselabs" target="_blank">GOOGLE+</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">CONTACT</a></li>
</ul>
</ul>

css code

ul
{
font-family:verdana;
list-style:none;
}
ul li
{
display: block;
position: relative;
float:left;
}
li ul
{
list-style:none;
display:none;
}
ul li a {
 display: block;
 border:solid 1px #3399ff;
 background:#eeeeee;
 padding:10px;
 color:#333333;
 text-decoration:none;
 white-space: nowrap;
 
}
ul li a:hover
{
background:#3399ff;
color:white;
}
li:hover ul {
    display:block;
    position:absolute;
}
li:hover li
{
float:none;
}