This tutorial explains how to create horizontal lists and use list items as links in order to create a horizontal navigation bar. The result will look like the image below. You could then go and add some CSS styling to turn this into a nicely themed navigation bar.

Watch the video below and scroll down to see the sample code.
Here is the sample HTML code:
<html> <head> <title>Styling lists</title> <link rel="stylesheet" href="theme.css" type="text/css"/> </head> <body> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="support.html">Support</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </body> </html>
And here is the sample CSS code:
.menu li{ display: inline; font-family: Arial; padding-right: 10px; } .menu{ padding-left: 0; }