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 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:

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