I am new to CSS and am having a difficult time formatting the rollover effect on a navigation bar. It is a simple rollover effect, just changing the background color. However i dont know how to control the size of the effect. Currently it is off center on the word, meaning it is extending below the word farther than it is extending above word. How do i control the size and positioning of the effect. would really appreciate some learning. thanks.

this is my current code:
.navigation {
font-family: Arial, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #267400;
display: inline;
text-align: left;
vertical-align: middle;
padding-right: 15px;
padding-left: 15px;
}
.navigation:hover {
font-family: Arial, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #C69A03;
display: inline;
text-align: left;
vertical-align: middle;
padding-right: 15px;
padding-left: 15px;
}