I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.

The HTML

The markup is very simple. It’s an unordered list, with each link in a separate list item:

1. <ul id="nav">
2. <li id="nav-home"><a href="#">Home</a></li>
3. <li id="nav-about"><a href="#">About</a></li>
4. <li id="nav-archive"><a href="#">Archive</a></li>
5. <li id="nav-lab"><a href="#">Lab</a></li>
6. <li id="nav-reviews"><a href="#">Reviews</a></li>
7. <li id="nav-contact"><a href="#">Contact</a></li>
8. </ul>

View Step 1.

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.

First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

1. #nav {
2. margin:0;
3. padding:0;
4. }
5. #nav li {
6. display:inline;
7. padding:0;
8. margin:0;
9. }

Read more