Introduction
This article explains how to create a Vertical Drop Down Menu using CSS and HTML.
You often see sites containing a menu bar that drops down when hovered over and that look really great but those are usually horizontal Drop Down Menus, this article will help you to create a Vertical Drop Down Menu.
It's output will be something like this:
![Animation1.gif]()
Now we will see the procedure to create such a Drop Down Menu.
Step 1
First of all add a Style Sheet and a form or HTML page.
Then on the HTML page or the Web Form of .NET add a "Div" and name it as "divMenu".
After creating the Div we need to add a list of items and another list in those items, so it's final code will be something like this:
<div id="divMenu">
<ul>
<li><a href="#">Home1</a>
<ul>
<li><a href="#">Homea</a></li>
<li><a href="#">Homeb</a></li>
<li><a href="#">Homec</a></li>
</ul>
</li>
<li><a href="#">Home2</a>
<ul>
<li><a href="#">Homed</a></li>
<li><a href="#">Homee</a></li>
<li><a href="#">Homef</a></li>
</ul></li>
<li><a href="#">Home3</a>
<ul>
<li><a href="#">Homeg</a></li>
<li><a href="#">Homeh</a></li>
<li><a href="#">Homei</a></li>
</ul></li>
<li><a href="#">Home4</a></li>
<li><a href="#">Home5</a>
<ul>
<li><a href="#">Homej</a></li>
<li><a href="#">Homek</a></li>
<li><a href="#">Homel</a></li>
</ul></li>
<li><a href="#">Home6</a></li>
</ul>
</div>
Step 2
Right now your code is nothing more than this:
![cssdrop5.jpg]()
So to make it look good and interesting we will makechanges in the Style Sheet that we had added earlier.
Add this code to your Style Sheet:
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul
{
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #641b1b;
}
#divMenu li li {
list-style: none;
position: relative;
background: #641b1b;
left: 148px;
top: -27px;
}
#divMenu ul li a {
width: 148px;
height: 25px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#ffffff;
border:1px solid #eee;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #945c7d;
}
#divMenu ul li:hover ul li a:hover {
background-color: #945c7d;
}
#divMenu a:hover {
font-weight: bold;
}
Here I used the ID of the <Div>, in other words "divMenu".
Now everything will be changed and your output will be totally different and interesting.
Output
![Animation1.gif]()