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