Block Navigation Lists

First published on 2006-04-21, updated on 2008-04-08.

Site menus are more usable when you can click any part of each entry. Making the whole entry change style when the mouse moves over it is another neat effect.

Here’s how to do both using accessible HTML and efficient CSS.

Flat List

Start by choosing the most appropriate HTML elements.

We style this with CSS afterwards.

Flat HTML

<div id="nav">
<ul>
 <li><a href="/">Home</a>
 <li><a href="/contact">Contact Us</a>
 <li><a href="/about/">About Us</a>
 <li><a href="/stores/">Store Finder</a>
 <li><a href="/products/">Products</a>
 <li><a href="/sitemap">Site Map</a>
</ul>
</div>

This is the structure, like the skeleton of a human or the chassis of a car. Very simple designs allow the id directly on the <ul> and remove the <div> element.

At the moment, it looks like this:

Don’t worry how this looks. We’ll dress it up with CSS.

Flat CSS

/* Navigation */
#nav {
 padding: 0;
 width: 20%;
 border: 0;
}
/* List */
#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
 border-bottom: 1px solid #577;
}
/* Links */
#nav a {
 display: block;
 height: 1%; /* hasLayout */
 padding: 0.25em 0 0.25em 0.5em;
 color: #000;
 text-decoration: none;
 background: #bcc;
 border: 1px solid #577;
 border-bottom: 0;
}
#nav a:visited {
 color: #333;
 background: #abb;
}
#nav a:hover, #nav a:focus, #nav a:active {
 color: #000;
 background: #cdd;
}

Nothing fancy here, just the basic style for a block navigation list.

Flat Result

The hyperlinks are:

Adjust the colours, borders and spacing in the CSS to suit your design.

Nested List

You might expand the Products item to show each category of products.

Nested HTML

<div id="nav">
<ul>
 <li><a href="/">Home</a>
 <li><a href="/contact">Contact Us</a>
 <li><a href="/about/">About Us</a>
 <li><a href="/stores/">Store Finder</a>
 <li><a href="/new-products/">New Products</a>
 <li><a href="/clothing/">Clothing</a>
  <ul>
   <li><a href="/clothing/hats/">Hats</a>
   <li><a href="/clothing/jeans/">Jeans</a>
   <li><a href="/clothing/t-shirts/">T-shirts</a>
  </ul>
 <li><a href="/electricals/">Electricals</a>
  <ul>
   <li><a href="/electricals/house/">Household Appliances</a>
   <li><a href="/electricals/tools/">Power Tools</a>
   <li><a href="/electricals/tvs/">Televisions</a>
  </ul>
 <li><a href="/toys/">Toys</a>
  <ul>
   <li><a href="/toys/models/">Cars, Trains &amp; Planes</a>
   <li><a href="/toys/consoles/">Games &amp; Consoles</a>
   <li><a href="/toys/rmp/">Rampaging Mutant Penguins</a>
  </ul>
 <li><a href="/sitemap">Site Map</a>
</ul>
</div>

Here’s how it looks:

Nested CSS

There are now lists inside of lists which adds surprisingly little complexity to the styling. So to make things interesting, lets style the nested links differently from the main links: 

/* Navigation */
#nav {
 padding: 0;
 width: 20%;
 border: 0;
}
/* Lists */
#nav ul, #nav ul ul {
 margin: 0;
 padding: 0;
 list-style: none;
 border-bottom: 1px solid #577;
}
#nav ul ul {
 line-height: 1.454;
 font-size: 0.917em; /* 12px -> 11px */
 border: 0;
}
/* Links */
#nav a {
 display: block;
 height: 1%; /* hasLayout */
 padding: 0.25em 0.5em;
 color: #000;
 text-decoration: none;
 background: #bcc;
 border: 1px solid #577;
 border-width: 1px 1px 0 1px;
}
#nav a:visited {
 color: #333;
 background: #abb;
}
#nav a:hover, #nav a:focus, #nav a:active {
 color: #000;
 background: #cdd;
}
/* Nested Links */
#nav ul ul a {
 padding: 0 0.545em 0.272em 1.545em;
 border-top: 0;
}
#nav ul ul a:visited {
 color: #333;
 background: #bcc;
}
#nav ul ul a:hover, #nav ul ul a:focus, #nav ul ul a:active {
 color: #000;
 text-decoration: underline;
 background: #bcc;
}

Nested Result

Conclusion

Minimal, semantic HTML can be dressed up with CSS to produce vertical site menus which are usable, accessible, efficient and whose styling can be changed without altering the markup.

You don’t need class attributes, &nbsp; entities or <br> elements.