Vertical Drop Down Menu on Hover Using CSS and HTML

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 looks really great but those are usually horizontal Drop Down Menus, this article will help you to create a Vertical Drop Down Menu.

 

Its output will be something like this:

 

 

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:

 

 

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