The CSS
(Cut and paste into your editor)

ul#navigation {
padding: 0;
margin: 0;
background-color: #039;
color: #fff;
float: left;
width: 100%;
}
ul#navigation li { display: inline; }
ul#navigation li a {
padding: .25em 1em;
background-color: #039;
color: #fff;
text-decoration: none;
float: left;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
color: #000;
background-color: #fff;
}
ul#navigation li#currentlocation a { background-color: #09f; }

The HTML
(Cut and paste into your editor)

<ul id="navigation">

 <li><a href="../menutut/menu-list-01.html">A Menu List</a></li>
<li><a href="../menutut/menu-H-02.html">Horizontal Menus</a></li>
<li><a href="../menutut/menu-V-03.html">Vertical Menus</a></li>
<li id="currentlocation"><a href="horizmenu-code.html">Better Horizontal Menus </a></li>
<li><a href="vertmenu-code.html">Better Vertical Menus </a></li>

<li><a href="menu-resources.html">Tools to make menus</a></li></ul> 

Horizontal menu
Start with the Whole List <ul>
ul#navigation {
float: left; /*Moves the list left*/
margin: 0;/*Moves the list left*/
padding: 0; /*Moves the list left*/
width: 100%;
background-color: #039;
}

List Items <li>
ul#navigation li { display: inline; } /*Forces the list to line up*/

The Links <a>
ul#navigation li a {
display: block; /* now you make the links behave like a box*/
text-decoration: none; /*removes the bullets*/
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}