How to get a CSS list navigation hover working as needed?

Question

I'm at an impasse with a left navigation. I thought it was ok, then realized the whole buttons weren't selectable, only the text. And the hover is not working right. It looks right when you hover over the text, but not when you're off to the side of it. What's under the text is the normal state "showing through". Being very new at this I could sure use the help and learn from it, too. Thanks in advance! Please let me know if you need more info.
Regards,
Sal
URL: http://www.sallyaverill.com/bom/
css for the nav:
.navdiv {
  width: 200px;
  height: 590px;
  float: left;
.leftnavigation {
width: 192px;
margin: 70px 0px 0px 0px;
padding-left: 8px;
/* float: left; */
list-style-type: none;
.leftnavigation a, .leftnavigation li{
margin-left: 0px;
width: 171px;
padding-left: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
/* float: left; */
color: #392F9D;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-image: url(images/nav_normal.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
.leftnavigation li {
float: left;
background: url(images/nav_normal.jpg) top left no-repeat;
border-bottom: 1px solid #999;
line-height:150%;
padding-left: 10px;
.leftnavigation li:visited {
color:#66C;
.leftnavigation li:hover {
color:#fffff;
background-image: url(images/nav_down.jpg);
.leftnavigation a:visited {
color: #66C;
.leftnavigation a:hover {
color: #ffffff;
background-image: url(images/nav_down.jpg);

Answer 1

Replace what you have now with this:
/* LEFT NAVIGATION */
.navdiv {
width: 200px;
float: left;
.leftnavigation {
width: 190px;
margin: 70px 0px 0px 0px;
padding-left: 8px;
.leftnavigation li {
background: url(images/nav_normal.jpg) top repeat;
border-bottom: 1px solid #999;
list-style:none;
.leftnavigation li a {
width: 171px;
padding: 10px 5px;
font: bold 10px/1.2 Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display:block;
.leftnavigation li a:link {color: #392F9D;}
.leftnavigation li a:visited {color: #66C;}
.leftnavigation li a:hover,
.leftnavigation li a:active,
.leftnavigation li a:focus {
color:#FFF;
background-image: url(images/nav_down.jpg);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com