Did you find this useful?
Socialize it today.


Multi-level Navigation Menu with CSS

Monday, August 27, 2012

tags CSS

In the previous article, we covered how to create a simple horizontal navigation menu strip. In this tutorial, we are going to expand on this topic and 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 adding new <ul> tags before you end a 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. In the previous article in this series, we took a close look in detail on how to style the lists. 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. Here is what the final product should look like.






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 level 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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS: The Complete Reference HTML CSS and JavaScript Editor