CSS Navigation Background problem

Hello All

I'm sure this is a simple fix but I can't seem to figure it out. I have the following navigation.

http://jpswebsites.com/nav.jpg

I am trying to write the css so the wood panel shows on rollover but can't seem to get it to appear.

Here is my code

#nav {
line-height:83px;
background-image:url(../images/nav_bg.png);
background-repeat:repeat-x;
}

#nav ul{
text-align:center;
padding: 0;
list-style:none;
}

#nav li{
color:#FFF;
display:inline;


}
#nav ul li a:link {
text-decoration: none;

}

.nav ul li a:hover {
background-image:url(../images/nav_ro.jpg);
line-height: 60px;
background:url(../images/nav_ro.jpg);
}

.nav ul li a:visted {
color:#FFF;
}




I want the text to be vertically centered on the black bar as well. The problem with this is that I also have a drop shadow there which it seem to be taking into account when vertically centering so the text is about 10 pixels to low. How can I push it up a bit? I tried using padding but it had no reaction.

Any help is much appreciated and thank you in advance,
-puma10

1st, why you defined background image twice??

.nav ul li a:hover {
background-image:url(../images/nav_ro.jpg);
line-height: 60px;
background:url(../images/nav_ro.jpg);
}

You need to define <a> as block and adjust height of block according to background image height.

Following is sample code;

a {
display:block;
height:40px;
width:100px;
float:left;
text-align:center;
}

Worked like a charm. I have two background images in there because I was starring at my computer screen entirely to long. Much thanks vikram1vicky!