CSS Drop Down Menu

14 Apr 2012 by Shingo Tamura

The following tutorial will guide you through the process of creating a drop down menu using HTML and CSS. To create the drop down menu, you will need to complete 3 simple steps:

Steps

  1. Decide on a menu structure
  2. Build the menu with sub-menus visible
  3. Ensure that sub-menus appear correctly on rollover

Let's look at each step in detail:

Decide on a menu structure

Having a rough idea of how you would like your menu to look is a good starting point. To make the idea clearer in your mind, sketch the whole menu structure on paper, as below.

A rouch sketch of a drop down menu

Once you are satisfied with the rough structure, create and design your menu on the computer (see the example below).

An image of a drop down menu

Build the menu with sub-menus visible

Use an unordered list with a link in each item to build the menu, as follows:

<div class="menu">
    <ul>
        <li><a href="...">Home</a></li>
        <li><a href="...">Blog</a></li>
        <li><a href="...">About</a></li>
        <li><a href="...">Contact</a></li>
    </ul>
</div>

To create the next level down, use the same structure as presented above but insert it after the link to which you want to add the sub-menu (see the example below).

...
        <li>
            <a href="...">Blog</a>
            <div class="menu">
                <ul>
                    <li><a href="...">Most Popular</a></li>
                    <li><a href="...">Recent</a></li>
                    <li><a href="...">Archives</a></li>
                </ul>
            </div>
        </li>
...

Simply continue the process until you have created all the levels of your menu:

...
                    <li>
                        <a href="...">Archives</a>
                        <div class="menu">
                            <ul>
                                <li><a href="...">December</a></li>
                                <li><a href="...">November</a></li>
                                <li><a href="...">October</a></li>
                            </ul>
                        </div>
                    </li>
...

Styling the menus

To avoid complications, keep the processes of styling and making the sub-menus show and hide separate. At this stage, style the menus, while keeping the sub-menus visible, and position them in their appropriate locations. Your menu may appear as follows:

Example of CSS dropdown menu

Ensure that sub-menus appear correctly on rollover

Once you have marked up and styled your drop down menu, the final step is to implement a mechanism to show and hide the sub-menus based on which level you mouse over.

2nd-level menus

The first-level menus are always visible. To show and hide the second-level menus, add the following lines of rules to your style sheet:

div.menu div.menu { display: none; }
div.menu li:hover div.menu { display: block; }

The first line makes a div class named menu, which is located under a div with the same class, disappear. The second line allows the div to appear if an li is moused over higher up in the hierarchy of the DOM tree.

3rd-level menus

To show and hide the third-level menus, add the following CSS rules:

div.menu li:hover div.menu div.menu { display: none; }
div.menu div.menu li:hover div.menu { display: block; }

The first line makes a div class named menu disappear when it is within a div of the same class in a moused-over li. The second line makes the div appear upon mousing over the immediate li up in the hierarchy.

Deeper levels

Progressing beyond three levels is certainly possible. Merely insert a div.menu to both showing and hiding rules as follows:

4th-level menus

div.menu li:hover div.menu div.menu div.menu { display: none; }
div.menu div.menu div.menu li:hover div.menu { display: block; }

5th-level menus

div.menu li:hover div.menu div.menu div.menu div.menu { display: none; }
div.menu div.menu div.menu div.menu li:hover div.menu { display: block; }

It's that simple to build your own CSS drop-down menus! Check out the live demo below, and feel free to download this example for future use.

Demo and Download

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

 
blog comments powered by Disqus

Related Blog Posts