CSS Tutorial

CSS Lists as Hierarchical Navigation

Menus as Lists

Let's start by marking up the first list shown above as HTML and giving the list an id of "mainMenu":

<ul id="mainMenu">
 <li><a href="home.html">Home</a></li>
 <li><a href="services.html">Services</a></li>
 <li><a href="products.html">Products</a></li>
 <li><a href="support.html">Support</a></li>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>

With no CSS, this menu will display as follows:

Let's now see how we can turn the list into a stylish navigation menu.

CSS Horizontal Menu

First, we'll create a horizontal menu that looks like this: We will follow these steps:

1. Remove all the default list styling. We can do this using Eric Meyer's reset CSS, which contains the following rule:

   ol, ul {
    list-style: none;
   }

2. Set the width and margin of the menu.

   #mainMenu {
    margin:10px;
    width:900px;
    font-family: "Trebuchet MS";
   }

   Setting the width prevents the menu from wrapping when the user shrinks the browser window.
3. Set the list items to display as blocks. We'll also give them a width, float them to the left so that they'll each come up to the right of the preceding item, and give them a margin border.

   #mainMenu li {
    display:block;
    width:120px;
    float:left;
    margin-left:2px;
    border:1px solid #000;
   }

4. Change the a elements to block-level elements. We'll also add some formatting styles and remove the underline with text-decoration:none.

   #mainMenu a {
    display:block;
    padding:3px;
    text-decoration:none;
    background-color:#fff;
    color:#009;
   }

5. Finally, we change the hover state of the links so that they highlight when a user points to them:

   #mainMenu a:hover {
    background-color:#009;
    color:#fff;
   }

That's it. The full CSS code is shown below:

 ---- Code Omitted ---- 
<link type="text/css" rel="stylesheet" href="../reset-meyer.css" />
<style type="text/css">
 #mainMenu {
  margin:10px;
  width:900px;
  font-family: "Trebuchet MS";
 }
 #mainMenu li {
  display:block;
  width:120px;
  float:left;
  margin-left:2px;
  border:1px solid #000;
 }
 
 #mainMenu a {
  display:block;
  padding:3px;
  text-decoration:none;
  background-color:#fff;
  color:#009;
 }
 
 #mainMenu a:hover {
  background-color:#009;
  color:#fff;
 }
</style>
 ---- Code Omitted ---- 

Open CssListMenus/Demos/CssMenu-horizontal.html in your browser to see it in action.

CSS Vertical Menu

Vertical menus are created in much the same way, but they're even easier. The steps below show how to create a menu that looks like this:

1. Remove all the default list styling. Again we use Eric Meyer's reset CSS.
2. Set the width and margin of the menu. This time will make the menu much narrower as we're creating a vertical menu:

   #mainMenu {
    margin:10px;
    width:120px;
    font-family: "Trebuchet MS";
   }

3. Set the list items to display as blocks. We'll also set the border properties adding borders to the left, right and bottom edges and then adding a border to the top of only the first list item. We use the :first-child pseudo-class (see footnote) to do this.

   #mainMenu li {
    display:block;
    border:1px solid #000;
    border-top:0px;
   }
   #mainMenu li:first-child {
    border-top:1px solid #000;
   }

4. Change the a elements to block-level elements. Again, we'll also add formatting styles and remove the underline with text-decoration:none.

   #mainMenu a {
    display:block;
    padding:3px;
    text-decoration:none;
    color:#009;
   }
   

5. Finally, we change the hover state of the links so that they highlight when a user points to them:

   #mainMenu a:hover {
    background-color:#009;
    color:#fff;
   }

The full CSS code is shown below:

 ---- Code Omitted ---- 
<link type="text/css" rel="stylesheet" href="../reset-meyer.css" />
<style type="text/css">
 #mainMenu {
  margin:10px;
  width:120px;
  font-family: "Trebuchet MS";
 }
 #mainMenu li {
  display:block;
  border:1px solid #000;
  border-top:0px;
 }
 #mainMenu li:first-child {
  border-top:1px solid #000;
 }
 #mainMenu a {
  display:block;
  padding:3px;
  text-decoration:none;
  color:#009;
 }
 #mainMenu a:hover {
  background-color:#009;
  color:#fff;
 }
</style>
 ---- Code Omitted ---- 

Open CssListMenus/Demos/CssMenu-vertical.html in your browser to see it in action.

CSS Dynamic Menus

Dynamic menus have long been popular on the web. Until relatively recently, it was necessary to use JavaScript to create these menus. The wider support of the :hover pseudo-class changes that. In this section, we'll show you how to create dynamic menus using pure CSS.

CSS Dropdown Menu

So far, we have only looked at how we can use CSS to change the display of single-level menus. But what happens when we introduce a second level of choices using a nested list. The code sample below shows the same horizontal menu we saw before, but with the addition of a nested list:

 ---- Code Omitted ---- 
<ul id="mainMenu">
 <li><a href="home.html">Home</a></li>
 <li><a href="services.html">Services</a></li>
 <li><a href="products.html">Products</a></li>
 <li><a href="support.html">Support</a></li>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="about.html">About</a>
  <ul>
   <li><a href="history.html">Company History</a></li>
   <li><a href="staff.html">Our Staff</a></li>
   <li><a href="press.html">Press Releases</a></li>
   <li><a href="investorInfo.html">Investor Information</a></li>
  </ul>
 </li>
 <li><a href="contact.html">Contact</a></li>
</ul>
 ---- Code Omitted ---- 

With this nested list in place and without changing the CSS, this page will display as follows:

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu items to relative. We will need to position the submenus using absolute positioning, but absolutely positioned elements are positioned within their nearest non-statically positioned containing element. So, to prepare for that, we'll first make the main list items relatively positioned:

   #mainMenu li {
    position:relative;
    /*other declarations omitted*/
   }

2. Position the submenus absolutely. Submenus are contained in ul elements within li elements. The following rule uses absolute positioning to position them immediately below those li elements:

   #mainMenu li ul {
    position:absolute;
    margin:0px;
    padding:0px;
    left:-3px;
    top:22px;
   }

   The result:
3. Hide the submenus. Add display:none; to the rule above to hide the submenus.
4. Style the submenu options. The two rules below add borders around the submenu options. We turn the top border off for all but the first option, which we identify with the :first-class pseudo-class so that we don't get a double-thick border resulting from top and bottom borders of adjacent options.

   #mainMenu li ul li {
    width:150px;
    font-size:smaller;
    border-top:none;
   }
   #mainMenu li ul li:first-child {
    border-top:1px solid #000;
   }

5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items. The code below sets the display property of the submenu to block when the user hovers over the parent list item:

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

That's it. The full CSS code is shown below:

 ---- Code Omitted ---- 
<link type="text/css" rel="stylesheet" href="../reset-meyer.css" />
<style type="text/css"> 
 #mainMenu {
  margin:10px;
  width:900px;
  font-family: "Trebuchet MS";
 } 
 #mainMenu li {
  position:relative; 
  display:block;
  width:120px;
  float:left;
  margin-left:2px;
  border:1px solid #000;
 }
 #mainMenu a {
  display:block;
  padding:3px;
  text-decoration:none;
  background-color:#fff;
  color:#009;
 }
 #mainMenu a:hover {
  background-color:#009;
  color:#fff;
 }
 #mainMenu li ul {
  position:absolute;
  margin:0px;
  padding:0px;
  left:-3px;
  top:22px;
  display:none; 
 }
 #mainMenu li ul li {
  width:150px;
  font-size:smaller;
  border-top:none;
 }
 #mainMenu li ul li:first-child {
  border-top:1px solid #000;
 }
 #mainMenu li:hover ul {
  display:block; 
 }
</style>
 ---- Code Omitted ---- 

Open CssListMenus/Demos/CssMenu-dropdown.html in your browser to see it in action.

CSS Flyout Menu

Let's now take a look at creating a flyout menu, which is very similar to creating a dropdown menu. The code sample below shows the vertical menu we saw before, but with the addition of several nested lists:

 ---- Code Omitted ---- 
<ul id="mainMenu">
 <li><a href="home.html">Home</a></li>
 <li><a href="services.html">Services</a>
  <ul>
   <li><a href="service1.html">Service 1</a></li>
   <li><a href="service2.html">Service 2</a></li>
   <li><a href="service3.html">Service 3</a></li>
  </ul>
 </li>
 <li><a href="products.html">Products</a>
  <ul>
   <li><a href="product1.html">Product 1</a></li>
   <li><a href="product2.html">Product 2</a></li>
   <li><a href="product3.html">Product 3</a></li>
  </ul>
 </li>
 <li><a href="support.html">Support</a></li>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="about.html">About</a>
  <ul>
   <li><a href="history.html">Company History</a></li>
   <li><a href="staff.html">Our Staff</a></li>
   <li><a href="press.html">Press Releases</a></li>
   <li><a href="investorInfo.html">Investor Information</a></li>
  </ul>
 </li>
 <li><a href="contact.html">Contact</a></li>
</ul>
 ---- Code Omitted ---- 

With this nested list in place and without changing the CSS, this page will display as follows:

By modifying the CSS, we can move the submenus over to the right and hide tehm until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu items to relative. Like with dropdown menus, we will need to position the submenus using absolute positioning:

   #mainMenu li {
    position:relative;
    /*other declarations omitted*/
   }

2. Position the submenus absolutely and hide the submenus.

   #mainMenu li ul {
    position:absolute;
    width:150px;
    left:118px;
    top:5px;
    display:none;
   }

3. Style the submenu options.

   #mainMenu li ul li {
    font-size:smaller;
   }

4. Display the submenu when the user hovers over the main option. The background-color declaration is necessary for Internet Explorer 7. Without it, the submenus can disappear while the user is hovering over them.

   #mainMenu li:hover ul {
    display:block;
    background-color:#fff; /*for IE7*/
   }

5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won't fill the full width of their parent list items and the menus will only work when users hover over the text of the link.

   #mainMenu a {
    position:relative; /*for IE7*/
    /*other declarations omitted*/
   }

 ---- Code Omitted ---- 
<link type="text/css" rel="stylesheet" href="../reset-meyer.css" />
<style type="text/css">
 #mainMenu {
  margin:10px;
  width:120px;
  font-family: "Trebuchet MS";
 }
 #mainMenu li {
  position:relative; 
  display:block;
  border:1px solid #000;
  border-top:0px;
 }
 #mainMenu li:first-child {
  border-top:1px solid #000;
 }
 
 #mainMenu a {
  position:relative; /*for IE7*/
  display:block;
  padding:3px;
  text-decoration:none;
  color:#009;
 }
 
 #mainMenu a:hover {
  background-color:#009;
  color:#fff;
 }
 
 #mainMenu li ul {
  position:absolute;
  width:150px;
  left:118px;
  top:5px;
  display:none;
 }
 
 #mainMenu li ul li {
  font-size:smaller;
 }
 
 #mainMenu li:hover ul {
  display:block;
 } 
</style>
 ---- Code Omitted ---- 

Accessibility

Navigation menus marked up as lists are much more accessible than menus marked up in tables or nested divs. One way to get a feel for this is to turn off CSS in the browser to see if the menu is still navigable. In Firefox, you can do this by choosing View > Page Style > No Style from the main menu. When we look at CssListMenus/Solutions/CssMenu-mixed-challenge.html in this view, here's what we see:

This is how a screen reader might "see" the page. Because of the logical structure, it should have no problem presenting it correctly.

A special thank you to RamblingSoul.com for allowing us to use its CSS template for the lesson on Page Layout.

All material in this CSS Lists as Hierarchical Navigation is copyright 2010 Webucator. The purpose of this website is to help you learn CSS on your own and use of the website implies your agreement to our CSS Tutorial Terms of Service.