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="index.html">Home</a></li>
<li><a href="lesson1.html">Lesson 1 </a></li>
<li ><a href="vertmenu-code.html">Vertical Menus</a></li>
<li id="currentlocation"><a href="horizmenu-code.html">Horizontal 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;
}