a:hover problems

[deric.cain]

i'm having some trouble when hovering over any of the buttons in my menu. they look fine until i hover over them and the background color goes outside the border. if i cahnge the width on them then my words move when i hover over them. i'll paste the a, a:hover below. any help is appreciated.

/* Menu */

#menu {
margin-bottom: 19px;
border: 1px solid #999999;
background-color: #f4f3f3;
}

#menu h2 {
display: none;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
padding-top: 1px;
background: url(images/img07.gif) repeat-x;
color: #660000;
}

#menu li.first {
background: none;
color: #524D49;
}

#menu a {
display: block;
width: 166px;
padding: 7px 10px 7px 25px;
text-transform: uppercase;
background: url(images/img08.jpg) no-repeat 10px 50%;
text-decoration: none;
letter-spacing: 1px;
font-size: x-small;
font-weight: bold;
}

#menu a:hover {
background-color: #ebeaea;
color: #7A3A1A;
width: inherit;
}

the actual site url is www.kingdomroadproducts.com. check it out to see what i'm talking about.

[bluewalrus]

#menu {
margin-bottom: 19px;
border: 1px solid #999999;
background-color: #f4f3f3;
width:166px;
}
#menu a:hover {
background-color: #ebeaea;
color: #7A3A1A;
width:131px;
}