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%; }