Trouble with image rollover on WordPress horizontal menu bar!

I’m having trouble on putting image rollover on the menu bar!
I don’t know if I did wrong to the css or anything but it just won’t work!

here is part of the css

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

#menu ul{
      list-style:none;
}

#menu ul li{
      float: right;
}

#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 don’t know everything you know), the css looks ok to me.

Here is the code in the index.php

<div id="menu">
       <ul>
       <?php wp_list_pages('depth=1&title_li='); ?>
       </ul>
       </div>

And here is how it looks like now
https://sparkledreams.net
the link on the menu on top of the page suppose to show a green image when you rollover it.

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

Thanks in advance,
SugarBrush