Also look at Listutorial -

webwiz — Wed, 21 May 2008 19:40:01 +0000

Also look at Listutorial - step by step instructions for all kinds of menus. See tutorial 4 for horizontal lists.

Alright, we'll start with a

Megan — Wed, 21 May 2008 13:28:57 +0000

Alright, we'll start with a list:

<ul id="navbar">
      <li><a href="index.html">Home</a></li>
      <li><a href="aboutus.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="contactus.html">Contact Us</a></li>
</ul>

That's what a navigation menu is - a list. Now we'll add some CSS.

First we need to take out any margins and padding and the list bullets:

ul#navbar {
 margin: 0;
 padding: 0;
 list-style: none;
 }

Next, let's make the list items float next to each other:

ul#navbar li {
 float: left;
 display: block;
 padding: .5em 0;
 }

They're all bumping into each other so we should add some padding. I'm going to do this on the link tags, not the list items - you'll see why in a minute:

 ul#navbar li a {
  padding: 6px 10px;
  }

Next, let's add some colour:

ul#navbar {
 margin: 0;
 padding: 0;
 list-style: none;
 background: #ccc;
 }
 
ul#navbar li {
 float: left;
 display: block;
 padding: .5em 0;
 }
 
 ul#navbar li a {
  padding: .5em 10px;
  background: #ccc;
  color: #009;
  text-decoration: none;
  }

Next, we'll put some hovers on those nav items:

ul#navbar li a:hover, ul#navbar li a:active {
  background: #99CCCC;
  color: #333;
  }

The only thing left to do is make that grey bar stretch all the way across the page:

ul#navbar {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #ccc;
	height: 2.25em;
} 

If you're really having trouble I can put it all together for you, but you should at least try to work with the code first.