How To Build a Pure HTML5 and CSS3 Dropdown Menu

8th Mar 2014 | Posted by Eko S. | 1 Comment

Web navigation is one of the important element of a website, the more dynamic a site it will require more navigation. But, how to make your navigation look neat? Dropdown menu is one of your effective solution since it make a website look clean and you can classify it in large numbers.

HTML CSS Tutorial

And make a dropdown menu is very easy, by CSS3 tecnology you can create a stylish dropdown menu without javascript and image, pure HTML and CSS. So follow this tutorial to see the step by step process of building your own Dropdown menu.

Step 1. The folder structure

The first step that you should do is preparing a strukture folder, as you can see in the image below:
As you can see, we also create the images folder, but it’s optional you can ignore it.

HTML CSS Tutorial

Step 2: HTML Structure

Save this html script in index.html file

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <link rel='stylesheet' type='text/css' href='/articles_and_tutorials/how_to_build_a_pure_html5_and_css3_dropdown_menu/styles.css' />
    </head>
    <body>
        <div class="container">
            <div id='dropdown'>
                <ul>
                   <li class='arrow-down'><a href='#'><span>Stage Select</span></a>
                      <ul>
                         <li><a href='#'><span>Parking</span></a></li>
                         <li><a href='#'><span>Bar & Restaurant</span></a></li>
                         <li><a href='#'><span>Residence</span></a></li>
                      </ul>                      
                   </li>
                </ul>
            </div>
        </div>
    </body>
</html>

You can try to run that script and here the result:

HTML CSS Tutorial

Step 3: Basic CSS Style

In this tutorial, first we’ll create the page background then make the container that will appear in the center page. Save this script below on style.css file:

@charset 'UTF-8';
@charset=ISO-8859-1;

body{
    background: #2e3a43;
    font-size: 16px;
}

.container{
    height: auto;
    max-height: 300px;
    width: auto;
    max-width: 28%;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;    
    top:0;
    padding: 25px !important;

Here the result:

HTML CSS Tutorial

Step 4: Make a Dropdown Style

Let’s create the global style for your dropdown, by adding this script on style.css file

#dropdown ul{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

#dropdown ul li {
    float: left;
    min-height: 1px;
    vertical-align: middle;
    color: #fff;
}

#dropdown ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}

#dropdown ul ul li {
    float: none;
}

#dropdown ul ul ul {
    top: 2px;
    left: 100.6% !important;
}

#dropdown a {
    display: block;
    line-height: 1em;
    text-decoration: none;
    color: #fff;
}

#dropdown > ul {
    height: 0px;
    padding: 15px 15px 15px 5px;
}

#dropdown > ul > li {
    margin: 0 5px;
}

The result will be like this:

HTML CSS Tutorial

Step 5: The dropdown style for up level

Step 5.1

We’ll be focus on the up level dropdown menu on the “stage select” section:

#dropdown ul a {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d0723c), to(#b7481b));
    background-image: -webkit-linear-gradient(#d0723c, #b7481b);
    background-image: -moz-linear-gradient(#d0723c, #b7481b);
    background-image: -o-linear-gradient(#d0723c, #b7481b);
    background-image: linear-gradient(#d0723c, #b7481b);
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
        
    -webkit-box-shadow: 0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px 2px 5px inset;
    -moz-box-shadow:    0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px 2px 5px inset;
    box-shadow:         0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px 2px 5px inset;
    
    color: #d3d4d5;
    font-family: "Cabin SemiBold", verdana;
    font-size: 13px;
    font-weight: 200;
    
    line-height: 40px;
    padding: 0 15px;
    position: relative;
    text-align: center;
}

Step 5.2

Adding the hover effect.

#dropdown > ul > li:hover > a {  
    color: #fff;      
    -webkit-box-shadow: 0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px -5px 8px inset;
    -moz-box-shadow:    0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px -5px 8px inset;
    box-shadow:         0px 8px 15px -8px rgba(0, 0, 0, 1), #e18537 0px -5px 8px inset;
}

Here the result:

HTML CSS Tutorial

Step 5.2

Adding the down arrow on the right side “Stage Select”

#dropdown ul .arrow-down {
    position: relative;
}

#dropdown ul .arrow-down ul {
    -moz-border-radius: 0 4px 4px 4px;
    -webkit-border-radius: 0 4px 4px 4px;
    border-radius: 0 4px 4px 4px;
    -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5);  
    padding: 3px 0;
    background: #454c55 url(/articles_and_tutorials/how_to_build_a_pure_html5_and_css3_dropdown_menu/images/bg_1.png);
}

#dropdown ul .arrow-down > a:after{
    content: '?';
    border-left: 1px solid rgba(216, 216, 216, 0.35);
    color: #fff;
    -moz-box-shadow: -1px 0 0 rgba(154, 44, 14, 0.6);
    -webkit-box-shadow: -1px 0 0 rgba(154, 44, 14, 0.6);
    box-shadow: -1px 0 0 rgba(154, 44, 14, 0.6);
    display: inline-block;
    font-size: 13px;
    margin-left: 25px;
    text-align: center;
    height: 40px;
    width: 37px;    
}

#dropdown ul .arrow-down > a {
    padding-right: 0;
}

Here the result:

HTML CSS Tutorial

Step 6: Level 1 Dropdown Style

It’s time to tidy up the level 1 sub menu

#dropdown ul li:hover > ul {
    visibility: visible;
}

#dropdown ul ul a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    line-height: 150%;
}


#dropdown ul .arrow-down ul a {
    background: rgba(69, 76, 85, 0.3);
    padding: 10px 8px 10px 16px;
    border-bottom: 1px solid #242a33;
    border-top: 1px solid #6e7277;
    text-align: left;
}

Here the result:

HTML CSS Tutorial

As you can see, there are some parts that are not neatly and we also don’t add the hover effect. In the next step we’ll fix that also make our dropdown can appear to level 2, 3 and so on.

Step 7: Adding Level 2, 3 and so on – Dropdown Style

Step 7.1

First we’ll add the hover effect and make it more neat.

#dropdown ul > .arrow-down > ul > li:first-child > a, 
#dropdown ul > .arrow-right > ul > li:first-child > a {
    border-top: none;
    margin-top: -2px;
}

#dropdown ul > .arrow-down > ul > li:first-child > a:hover, 
#dropdown ul > .arrow-right > ul > li:first-child > a:hover{
    border-top-right-radius: 4px;
}

#dropdown ul > .arrow-down > ul > li:nth-child(2n+2) > a, 
 #dropdown ul > .arrow-right > ul > li:nth-child(2n+2) > a{
    border-bottom: 1px solid #242a33;
}

#dropdown ul > .arrow-down > ul > li:last-child > a, 
#dropdown ul > .arrow-right > ul > li:last-child > a{
    border-bottom: none;
    border-top: 1px solid #6e7277;
    margin-bottom: -3px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#dropdown ul .arrow-down li:hover > a {  
    border-top: 1px solid #6e7277;
    border-bottom: 1px solid #242a33;
    color: #d3d4d5;
    background: rgba(94, 98, 105, 0.7);
    position: relative;
}
#dropdown ul .arrow-down > li:hover > a:after {
    border-left: 0 none;
    content: '';
    height: 100%;
    width: 6px;
    position: absolute;
    right: 0;
    top: 0;
}

#dropdown ul .arrow-down ul .arrow-down a:after {
    content: none;
}

Here the result:

HTML CSS Tutorial

Step 7.2

Adding Dropdown Menu Level 2, 3 and so on

<div id='dropdown'>
                <ul>
                   <li class='arrow-down'><a href='#'><span>Stage Select</span></a>
                      <ul>
                         <li><a href='#'><span>Parking</span></a></li>
                         <li class="arrow-right"><a href='#'><span>Bar & Restaurant</span></a>
                             <ul>
                                 <li><a href='#'><span>Parking</span></a></li>
                                 <li><a href='#'><span>Bar & Restaurant</span></a></li>
                                 <li><a href='#'><span>Residence</span></a></li>
                              </ul>
                         </li>
                         <li><a href='#'><span>Residence</span></a></li>
                      </ul>                      
                   </li>
                </ul>
 </div>

Here the result:

HTML CSS Tutorial

Don’t forget to add class .arrow-right on

tag that become the parent of our sub level. By adding this script on our style.css

#dropdown ul ul .arrow-right > a:after {
    content: '\25B6';
    padding-left: 15px;
    font-size: 13px;
    float: right;
}

Here the result:

HTML CSS Tutorial

If you’re interested, you also can add more level like this:

HTML CSS Tutorial

Conclusion

You just created your pure CSS dropdown menu, I hope you’ve enjoyed this tutorial and thank you.

- Written by Mukhlasin -

Grab this eBook: 30 Days to Sell, for only $7.95 Alan will teach you How To Convert Users from Try to Buy in 30 Days! Take advantage of this Mighty deal, for a limited time only and start welcoming new users to your site!