Multi-level Navigation Menu with CSS

In this tutorial, we are going to build a mutli-level navigation menu. There are several ways to implement this. In this guide, we are going to build this using HTML and CSS.

If you really want to get fancy and apply some cool effects, you’ll need to apply some JavaScript (or better yet jQuery) techniques.

Navigation Menu HTML Structure

To build our multi-level navigation menu, we are simply going to use an unordered list with sub-lists. Then, we’ll just apply some CSS styling properties to show and hide the second-level items.

<ul id="navMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Video</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Location</a></li>
            <li><a href="#">Hours of Operation</a></li>
        </ul>
    </li>
</ul>

You can add new second-level sub-items simply by adding new <ul> tags before you end the main item with an <il> tag.

Note in the example above how we started a new unordered list prior to closing the Products main item.

CSS Code

Without CSS, we have a plain multi-level unordered list. We’ll need to apply some creative styles to transform this into a navigation menu. Here is a summary of the CSS code that we will need.

ul#navMenu {
    padding:0px;
    margin:0px;
    width:420px;
    list-style:none;
    position:relative
}

ul#navMenu ul {
    position:absolute;
    left:0;
    top:100%;
    display:none;
    padding:0px;
    margin:0px
}

ul#navMenu li {
    display:inline;
    float:left;
    position:relative
}

ul#navMenu a {
    text-decoration:none;
    padding:10px 0px;
    width:100px;
    background:#666666;
    color:#ffffff;
    float:left;
    text-align:center;
    border:1px solid #ffffff;
}

ul#navMenu a:hover {
    background:#cccccc;
    color:#333333
}

Here is the section of CSS code that makes the sub-items appear when you hover over the first level main items.

ul#navMenu li:hover ul {
    display:block;
}

ul#navMenu ul a {
    width:150px;
}

ul#navMenu ul li {
    display:block;
    margin:0px
}

You first hide the second-level sub-item list by setting the style display:none. Then to make the sub-items appear, you set the style to display:block on the pseudo-class hover on the parent list item.

Third level Menu Items

In this example, we are going to add a third level of menu items. The third level will be placed under the Video sub item.

<ul id="navMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Video »</a>
                <ul>
                    <li><a href="#">VCR</a></li>
                    <li><a href="#">DVD</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Location</a></li>
            <li><a href="#">Hours of Operation</a></li>
        </ul>
    </li>
</ul>

For the third level, we need to add the following CSS styles.

ul#navMenu ul ul {
    top:0;
    left:100%;
}

ul#navMenu li:hover ul ul {
    display:none;
}

ul#navMenu ul li:hover ul {
    display:block;
}

You can continue to create additional levels if needed by following the same pattern of hiding and showing on the hover pseudo-class.

Once you have built a few menu navigation bars, the concept of formatting an unordered list into a menu tab becomes easier and easier. Once you master this technique, you can perform more advanced effects with the help of JavaScript.