In this blog I will give you HTML CODE embedded with CSS. In CSS we use ul (unordered list) and li (list item). in this code i made a ID (menu). here all the list items are initially hidden but after hover on the menu the list item are drop down.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<style>
#menu
{
margin: 0px;
margin-left: 50px;
padding: 0px;
}
#menu ul
{
margin: 0px;
padding: 0px;
}
#menu li
{
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: relative;
background: #999;
}
#menu ul li a
{
text-align: center;
font-family: Georgia, "Times New Roman" , Times, serif;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000000;
}
#menu ul ul
{
position: absolute;
visibility: hidden;
top: 30px;
}
#menu ul li:hover ul
{
visibility: visible;
}
#menu li:hover
{
background: #F3C;
}
#menu ul li:hover ul li a:hover
{
background: #0F6;
color: #000;
}
#menu a:hover
{
color: #000;
}
.clearfloat
{
clear: both;
margin: 0px;
padding: 0px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Name</a>
<ul>
<li><a href="#">sanjay</a> </li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay</a> </li>
</ul>
</li>
<li><a href="#">Name</a>
<ul>
<li><a href="#">sanjay</a> </li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay</a> </li>
</ul>
</li>
<li><a href="#">Name</a>
<ul>
<li><a href="#">sanjay</a> </li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay </a></li>
<li><a href="#">sanjay</a> </li>
</ul>
</li>
</li>
</ul>
</div>
</body>
</html>