How to create Horizontal drop down menu with pure CSS

I have earlier published a tutorial to create a vertical CSS dropdown menu. In this drop down menu, the main menu links are listed in horizontal direction and the first level of category appears vertically below the main menu items. This is the most common style of drop down menus in websites.

However, there are web designers who look out for horizontal drop down menus. In this style, the main menu links are listed in vertical direction and all subsequent levels of sub-categories fly out horizontally. In this article, I will explain the step by step process of creating a horizontal drop down menu with CSS. That’s right; we will not use any JavaScript or flash here, just pure CSS.

drop-down-menu

This tutorial is largely based on my previous tutorial on vertical drop down menu. Here also, I will use the same frosted glass effect that will look equally good with any background. But you can change it as per your need by changing a few lines of CSS codes. Before we start, I am sure you would like to have a look at it first.

Horizontal Drop down Menu Demo

And let me also make it clear at this point of time that this drop down will not work with IE7 or IE8, so that you don’t get disappointed later on. This is because, we will use some CSS3 properties like box-shadow, border-radius, transparency and display which are not supported by older browsers. But with all modern browsers, it should work perfectly fine.

If you are not interested in learning how to create this horizontal drop down menu and interested in just implementation in your website, you can download the horizontal drop down menu files which are kept at the end of this tutorial.

Main Menu

main-menu

We will first complete the html mark-up and styling for our main menu. After this, we will move to the further sub-categories. In this example, we have five main menus – Home, Web Design Tips, Web Tools, Build Website and Contact us.

 

The html mark-up is straight forward – put all the main menus as list items inside one unordered list. And for ease of coding, we will put everything inside a div with class “menu”.

    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design Tips</a> </li>
            <li><a href="#">Web Tools</a> </li>
            <li><a href="#">Build a Website</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>

Nothing special here though the mark-up is clean and very precise. The exciting part starts with CSS. If you have already gone through my tutorial on vertical drop down menu, it should look pretty familiar.

.menu ul
{
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.4);
    display: inline-table;
    padding: 20px 0;
    list-style: none;
}
.menu ul li
{   
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s Ease;
    -moz-transition: all 0.2s Ease;
    -o-transition: all 0.2s Ease;
    position: relative;
}
.menu ul li:hover
{   
    box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.2),
0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

Here also, I am defining the colors everywhere in rgba to introduce transparency. This makes the frosted glass effect look equally good with all the backgrounds.

We want to display the main menu in with fixed width layout, so we are defining display property of <ul> to inline-table. And we don’t want any circle or disc to be displayed before the menu items. This we are achieving by adding list-style: none.

For <li> (targeted with .menu ul li); we are defining the transition delay of 0.2 seconds with CSS3 transition property. As you can see, we are using the browser prefixes for this as it is still required. Since, we will be positioning the sub-categories (next level of <ul>) with respect to the main menu items, we are using “position: relative” here.  To provide a sleek look on hover, we are introducing CSS3 box-shadow on mouse hover with <li>.

Link Style

The style of all the hyperlinks inside the menu class is same.

.menu a
{
    font-family: Arial, Tahoma, Sans-Serif;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    text-shadow: rgba(255,255,255,0.3) 1px 1px 0px;
    display: block;
    padding: 20px 20px;
    width: 180px; 
}

For menu, we are defining the font family, size, weight, color and text-decoration – all usual stuffs. Important here is padding – which can only be achieved by changing the display property of hyperlink from inline (default) to block. The CSS3 text-shadow property is being used to introduce an inset effect of text. And for getting the uniform width of all links, we are defining the width of all links to 180px.

Drop down Menu

The drop down menu is originally hidden and is displayed once the pointer moves over to the main category. This can be achieved by initially defining the display property of sub-menu to none and then making it visible on hover. We will nest the Sub menu inside the list item of corresponding main menu. For sub menu also, we will use unordered list.

<div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design Tips</a>
                <ul>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Inspirations</a></li>
                </ul>
            </li>
            <li><a href="#">Web Tools</a>
                <ul>                   
                    <li><a href="#">HTML Code Tester</a></li>
                    <li><a href="#">Font Styler</a> </li>
                    <li><a href="#">CSS3 Generator</a></li>
                </ul>
            </li>
            <li><a href="#">Build a Website</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>

As you can see, we have nested two sub menus inside Web design Tips and Web Tools. Our HTML mark-up is really easy to understand and it is easier to add additional menu items as per your requirements.

Here is the CSS code for drop down menu.

.menu ul ul
{
    display: none;
    border-radius: 0px;
    padding: 0px;
}
.menu ul li:hover > ul
{
    display: inline-table;
    position: absolute;
    top: 0;
    left: 100%;
}

As I have already stated above, initially, the sub category defined by <ul> inside the main category <ul> is kept invisible by adding display:none. When the pointer moves on the main menu item (li:hover), the only sub-menu which is inside that main menu (>ul) becomes visible (display: inline-table). Also, the position of the sub-category items is being defined with respect the main menu (position: absolute). It is 0 pixel from top and 100% from left of the main menu. This brings it just after the main menu and maintaining the top position. Cool and really easy, isn’t it?

The last thing we want to do is to lessen the padding of the sub-category links. After all, the sub-category items need to look smaller than main menu items.

.menu ul ul li a
{
    padding: 8px 20px;
}

That’s all my friends! You have a cool horizontal CSS drop down menu to play with. And don’t worry if you want to add more categories further down the level. You can add any number of menus, sub-menus or sub-sub-….-sub menus; no need to change the CSS codes; just add the items inside HTML mark-up which can not be easier any more.

Don’t forget it to like it, share it with your followers, tweet it or add a link to this tutorial on your website or blog. And if you have any question, problem or better idea to create one, let’s discuss.

Here are all the files in a zip folder in case you wish to download.

Download Horizontal Drop Down Menu Files

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>