Trouble with image rollover on wordpress horizontol menu bar

[SugarBlush]

I’m having trouble on putting image rollover on the menu bar! There must me something wrong with my css.

here is part of the css

Code:

#menu{
width: 100%;
height: 51px;
background: transparent;
background-image: url(Images/nav-bg.png); background-repeat: repeat-x;
position: absolute;
top: 0px;
left: 0px;
}

#menu ul{
list-style:none;
position: absolute;
top: 0px;
right: 0px;
}

#menu ul li{
float: left;
}

#menu ul li a{
background-image: url(Images/navbg.png); background-repeat: repeat-x;
margin-top: 0px;
display: block;
padding-left: 32px;
padding-right: 32px;
text-decoration: none;
color: #1b2419;
font-size: 11px;
height: 51px;
background: transparent;
position: top right;
}

#menu a:hover, .current_page_item a {
padding-left: 32px;
padding-right: 32px;
display: block;
margin-top: 0px;
height: 51px;
color: #fff;
font-size: 11px;
background-image: url(Images/navhover-bg.png); background-repeat: repeat-x;
background: transparent;
}

As far as I KNOW (I may not know everything you know), the css looks ok to me.

Here is the code in the index.php

Code:

And here is how it looks like now
http://sparkledreams.net/wordpress
The link on the menu on top of the page suppose to show a green background when you roll over it. And also the links suppose to be exactly on the blue bar but it is placed slightly below the blue bar.

Can you help me fix all this?? Your help would be much appreciated!

Thanks in advance,
SugarBrush

[Author]

Posts