This is the CSS Cut and paste into your Editor

ul#navigation {
width: 12em;
}
ul#navigation li {
list-style: none;
background-color: #039;
border-top: solid 1px #039;
text-align: left;
margin: 0;
}
ul#navigation li a {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: 1px solid #3399FF;
border-right: 1px solid #3399FF;
}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #000000; }
a:hover { background-color: #fff; }
p a:link, p a:visited { color: #000; }

ul#navigation li#currentlocation a { background-color: #09f; }
</style>

This is the HTML (Cut and paste it into tour editor)

<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="lesson1.html">Lesson 1</a></li>
<li id="currentlocation"><a href="vertmenu-code.html">Vertical Menus</a></li>
<li><a href="horizmenu-code.html">Horizontal Menus</a></li>
</ul>

Style the outside and work in... <ul> --> then <li> ---> then <a>

The Width of the List
---ul#navigation{ width: 12em; }

The List items
ul#navigation li {
list-style: none; /* gets rid if the "bullets" */
background-color: #039;
border-top: solid 1px #039;
text-align: left;
margin: 0;
}

The Links
---ul#navigation li a, a:link, a:visited, a:active, and a:hover

ul#navigation li a {
display: block; /* makes the list behave like a box and the whole box is clickable*/
text-decoration: none;
padding: .25em;
border-bottom: solid 1px #39f;
border-right: solid 1px #39f;
}

a:link, a:visited { color: #fff; } /*color the links*/
a:hover, a:active { color: #000; }
a:hover { background-color: #fff; }/* make the hover state notable*/