How to Create Simple Drop Down Menu using HTML and CSS

This is the simple code to create the simple drop down menu using HTML and CSS. You can modify with your own creativity

HTML Code

 <div id='top_nav'>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">C</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 

   <li><a href="#">Java</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 

   <li><a href="#">PHP</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Privay</a></li>
   <li><a href="#">Terms</a></li>

  </ul>

 </div>

CSS CODE

#top_nav li:hover ul{
 display: block;
}

#top_nav{
 display: block;
 position: relative;
 background: #067;
 border: 1px solid rgb(200,140,0);
 font: bold 14px ubuntu;
 width: 1000px;
 height: 40px;
 margin: 0px auto;
}

#top_nav ul{
 margin: 0px;
 padding: 0px;
}

#top_nav li{
 position: relative;
 float: left;
 list-style-type: none;
}

#top_nav ul:after{
 content: *.*;
 display: block;
 height: 0px;
 clear: both;
 visibility: hidden;
}

#top_nav ul ul{
 position: absolute;
 display: none;
 left: 0px;
 width: 0px;
}

#top_nav li a{
 text-decoration: none;
 display: block;
 color: #fff;
 padding: 10px;
}

#top_nav ul ul li{ 
background: #fff;
}

#top_nav ul ul li a{ 
 color: #000;
 width: 100%; 
}