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 your editor)
<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 ><a href="horizmenu-code.html">Better Horizontal Menus </a></li>
<li id="currentlocation"><a href="vertmenu-code.html">Better Vertical Menus </a></li>
<li><a href="../menutut/menu-resources.html">Tools to make menus</a></li>
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*/