css li background problem

I have a vertical menu with a background. I need to shift the background to the right and in the center from top but an unable to do this. http://www.tiikoni.com/tis/view/?id=b0b07d2

ul.nav 
{
 margin:0; background-position:center;  background-image: url(../images/nav_bg.gif);font-family: "Century Gothic"; height:40px; padding-left:30px;
} 
ul.nav  a{ 
height:19px;color:white;display:inline-block;font-family:Century Gothic,Arial;font- size:14px;padding:开发者_如何学C8px 20px 0 ;text-decoration:none !important;vertical-align:middle;
}
ul.nav  a:hover
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;background-image: url(../images/nav_over.gif);
background-position: center top;background-repeat: no-repeat;text-decoration:none !important;vertical-align:middle;
}
* html ul.nav a
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
 ul.nav  a.highlight{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav li{
    display: inline;
    color:#FFF;
    background-image: url(../images/white_dotline.gif);
    background-repeat: no-repeat;
    background-position:right center;
    font-size:14px;
    padding:8px 1px;
    font-family:"Century Gothic";
    height:19px;
    [height:19px;
    height:20px;]/*Google Chrome, Opera and newer Safary 4+*/
    }

The horizontal and vertical position is controlled by the background-position property. The first number defines the horizontal position and the second the vertical position.

Words can be used for horizontal such as left, right and center and for vertical it is top, bottom and center. Absolute positions can be used also, such as pixels or ems, as well as percentages.

For example:

background-position: right top; /* positioned to the right and the top */
background-position: 100% 0; /* positioned 100% to the right and zero from the top (the same as above) */
background-position: 50px 200px; /* positioned 50px from the left and 100px from the top */

You have specified a single value for the background position, which means that it's used for horisontal positioning, and the vertical positioning is set to 50%. You should specify two values to control both positions. Example:

background-position: left center;