Shingo Tamura's Blog

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.

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

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:

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