First start with a simple HTML list containing the links you want in the navigation bar. We will use the <ul> tag because it is neat and semantic for our purposes. We'll also add arbitrary links using # as the target.

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>

Good, a nice, neat list that looks a little something like this:

• Link 1
• Link 2
• Link 3

You've probably noticed that the list is not horizontal at all at this point. To fix this, we need to start using CSS. We'll make a ID selector called #navlist and apply it to our unordered list.

#navlist li {
	display: inline;
	padding: 10px;
}

<ul id="#navlist">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>

The padding is simply to add some space, otherwise your links will side by side with no spaces. We should now have something like this:

• Link 1
• Link 2
• Link 3

Now we can add a quick rollover to make things more interesting. To do this, we simply edit the CSS to have different styles for hovered links.

#navlist li {
	display: inline;
	padding: 10px;
}
#navlist a:link, #navlist a:visited {
	color: #aaf;
}
#navlist a:hover, #navlist a:active {
	color: #ffa;
}

Now your list should display blue, but red when hovered over:

• Link 1
• Link 2
• Link 3

There's a lot more you can do with CSS and navigation lists, but for now we have achieved the goal of a horizontal navigation using CSS. This tutorial will be updated in the future with new and interesting tricks, so be sure to check back!