One of the most revolutionizing things I ever learned about building websites with HTML and CSS was the concept of using lists for my navigation. I was flabbergasted! Using lists for navigation? Why, that would look horrible! But then my eyes were opened to the real power that you have to control the way your navigation looks and behaves, as well as the very SEO friendly navigation the list will provide.

The HTML

If you are following along with me in your own document, you will need to make a list, much like the one below (depending on your file structure):

<ul id=”nav”>
<li><a href=”index.html” >Home</a></li>
<li><a href=”about.html” >About</a></li>
<li><a href=”contact.html” >Contact</a></li>
</ul>

And that is your basic list for navigation. It looks kind of ugly in the browser right now, but that’s alright because we’re going to fix that in a minute.

Now there are two ways to make navigation: vertical, or horizontal. Because horizontal is the more complicated, I will teach you that one and if you can understand that, creating a vertical navigation will be a piece of cake.

The CSS

Okay! Let’s add some style. I would recommend using either embedded or external CSS, which you can read about in my previous post.

First of all, let’s get rid of those ugly bullets! To accomplish this, your CSS will look like this:

ul#nav {
list-style: none;
}

Very cool! Well, you say, they’re all still stacked on top of each other. Now there are two ways to fix this. If you want to define a specific width for each menu item, you will need to use the following code (editing the width to your size):

ul#nav li {
float: right;
width: 100px;
}

If the specific width isn’t important, but you want them to be evenly spaced apart, here’s the switched version:

ul#nav li {
display: inline;
padding: 0 10px 0 10px;
}

That version will cause them to display on the same line, but adds padding to the left and right side of each item so that they are evenly spaced apart. Confused? Comment this post or otherwise contact me and I’ll try to address your specific situation.

Don’t forget to style the links from the default color! The following CSS would apply the unvisited and visited state to be black with a light gray background, the hover and active to white and a dark gray background, a 2px black border to the right of each menu item, padding to the left and right of 10px and top and bottom 5px, font 10px, bold, Verdana.

ul#nav {
list-style: none;
}
ul#nav li {
display: inline;
font: bold 10px Verdana;
}
ul#nav li a {
padding: 5px 10px 5px 10px;
color: #000000;
border-right: 2px solid #000000;
background: #CCCCCC;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFFFFF;
background: #333333;
}

The result is something like this: