I am struggling with aligning the background of my vertical menu to the right and center from the top. Here is the code I have tried:
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:8px 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+*/
}