Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download
[wpfilebase tag=file id=5]
You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :
<html>
<head>
<title>DropDown menu in HTML</title>
<link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
<li>
<a href=''>ABOUT</a>
<ul>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
<li><a href=''>Authors</a></li>
<li><a href=''>EmailUs</a></li>
</ul>
</li>
<li>
<a href=''>DEVELOPMENTt</a>
<ul>
<li><a href=''>CSharp language</a></li>
<li> <a href=''>Visual Basic .Net </a> </li>
<li><a href=''>Visual Basic 6.0</a></li>
<li><a href=''>Visual C++</a></li>
</ul>
</li>
<li>
<a href=''>WEB DEVEL</a>
<ul>
<li><a href=''>ASP.Net</a></li>
<li><a href=''>JavaScrip</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS :
#menus
{
height:30px;
background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
margin:0px;
padding:0px;
}
#menus ul li
{
list-style:none;
display:inline-block;
float:left;
position:relative;
line-height:30px;
height:30px;
background:url(images/navbg7.gif) repeat-x left top;
width:150px;
text-align:center;
behavior: url("csshover3.htc");
}
#menus ul li ul
{
display:none;
}
#menus ul li a
{
color:#fff;
padding:0px 15px;
line-height:30px;
text-decoration:none;
font-size:12px;
}
#menus a:hover
{
text-decoration:underline;
}
#menus ul li:hover ul
{
position:absolute;
left:0px;
top:30px;
display:block;
}
#menus ul li ul li
{
width:160px;
text-align:left;
padding-left:10px;
height:30px;
overflow:hidden;
background:url(images/navbg7.gif) repeat-x left top;
}