At its simplest level, a navigation bar for a website is nothing more than a list of pages that the user can visit in any order. It follows that the markup should reflect that. A simple example would be:

1. <ul id=”navbar” role=”navigation”>
2. <li><a href=”index.html”>Home</a></li>
3. <li><a href=”about.html”>About Us</a></li>
4. <li><a href=”contact.html”>Contact Us</a></li>
5. <li><a href=”products.html”>Our Products</a><li>
6. <li><a href=”order.html”>Place An Order</a></li>
7. <li><a href=”privacy.html”>Your Privacy</a></li>
8. </ul>

To comprehend what we are about to do, it is vital to understand the structure of our document. The <ul> tag is a block-display element that is a container for a series of <li> elements. If the <ul> tag could be thought of as a parent, the <li> elements inside of it could be considered its children: the <ul> element is required to give “birth” to them, and embraces its six children as a group.

Each <li> element is also a block-level element. Each <li> contains a single <a> link. Each link has some text content.

Because of the block display default property of each <li> element, each link appears on a separate line. As a first step, let’s change that to create a horizontal navigation bar. While we could write a style for <li> elements, that would be far too broad a rule, affecting <li> elements in every context, whether inside an <ol> or <ul> tag. Neither is it effective to write an inline style for each <li>. Instead, we’ll use the fact that the parent <ul> has a unique id and use a descendant selector to make our style specific:

1. ul#navbar li { display: inline; }

That rule makes each <li> element display inline rather than the default block, so that they are now side-by-side. Now, however, the text of each link runs into the next: we need to add a little space to each. Again, we will be specific, and use a series of descendant selectors:

1. ul#navbar li a { padding-left: 1em; padding-right: 1em; }

This spaces the links out nicely. Before we completed this step, you may have noticed that the first list item was indented slightly from the left. This is a leftover from the browser’s default CSS: by definition, an ordered or unordered list is slightly indented from the left. To remove this indentation, we must work on the <ul> itself:

1. ul#nav { padding-left: 0; }

You may find that you will also need to set margin-left and text-indent to 0 for this element, as different browsers use different properties to indent lists.

If we wanted to have a vertical line divide the links from each other, we don’t add characters or markup: our rule is to avoid adding extra content or elements, especially when they are only being added for presentational purposes. Instead, we will use CSS on each <li> element, adding to the style declaration we already have in place:

1. ul#navbar li { display: inline; border-left: 1px solid black; }

The links in our nab bar still look a little plain. We can change their appearance, with the understanding that the more we alter the presentation of links the less likely they are to be recognized as such:

1. ul#navbar li a { color: #000; text-decoration: none;
2. font-family: “Arial Narrow”, Arial, sans-serif; }

It is also common to add a hover effect to links in a navigation bar. We will do this by writing a style declaration for a pseudo selector to the links, essentially reversing the colours:

1. ul#navbar li a:hover { color: #fff; background: #000; }

When we specify :hover for an element we should also specify :focus, as the disabled won't be using a mouse to navigate your document, but a keyboard, which does not hover over links. So the declaration has a group selector added to it:

1. ul#navbar li a:hover, ul#navbar li a:focus {
2. colour: #fff; background: #000;
3. }

You may discover that the highlight background colour that appears when you hover over each link falls just short of the divider line to its right. The cause of this is obscure: it’s not the CSS. Rather, it is to do with our HTML.

In our first discussion of HTML I said that spaces and returns don’t matter: that HTML ignores anything more than a single space and that returns without markup don’t make any difference. That remains true… except in this case.

Because of the returns between each line of our <li> elements, the browser inserts a space between the end of each </li> and the start of the next opening <li>. It is these spaces that you are seeing outside the highlight area. To get rid of them, we simply eliminate the returns between our list items:

1. <ul id=”navbar”><li><a
2. href=”index.html”>Home</a></li><li><a href=”about.html”>About
3. Us</a></li><li><a href=”contact.html”>Contact
4. Us</a></li><li><a href=”products.html”>Our
5. Products</a><li><li><a href=”order.html”>Place
6. An Order</a></li><li><a href=”privacy.html”>Your
7. Privacy</a></li></ul>

This works well, except for one final niggling problem. We are using border-left to show divisions between navigational elements. The first link – Home – should therefore not have a line to its left. It is a simple to solve this with CSS2:

1. ul#navbar li:first-child { border-left: none; }

The first <li> element is the first child of its parent <ul> – we have simply crafted an exception to the general rule of list items inside the ul#navbar having a border to their left.

(Naturally, this is not supported in IE6. If you were interested in doing so, you would typically substitute the rule above for a reference to the first <li> having an id value, which you would have to add to the markup)

Finally, if you wanted the navigational bar to be centred as a whole on the page, remember that the unordered list is a box of its own:

1. ul#nav { text-align: centre; }