jQuery menu not working properly

jQuery menu not working properly

The problem is that the selected class is not activated when page is on the selected page from menu and when I hover over the menu the hover image never shows (background-position: 0px 0px;). insted of background-position: 0px -40px;)

How can I fix this or what is wrong?

Thanks in advance.

I am talking about the animate({backgroundPosition:"(0 -40px)"},{duration:150}) that doesn't scroll down the image to the selected part of the image grapichs, image is half top side of it blue and the bottom is grey to white(gradient). both sides of the picture is 40px, The backgroundposition command is just not working.

And I have no clue why the selected class is not working.

Script:
  1.     var navSelector = "ul#mainmenu li"; /** define the main navigation selector **/
        jQuery(navSelector).find('a').css( {backgroundPosition: "0 0"} );
       
        jQuery(navSelector).hover(function(){/** build animated dropdown navigation **/
            jQuery(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show("fast");
            jQuery(this).find('a').stop().animate({backgroundPosition:"(0 -40px)"},{duration:150});
            jQuery(this).find('a.top-level').addClass("blue");
            },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden", display:"none"});
            jQuery(this).find('a').stop().animate({backgroundPosition:"(0 0)"}, {duration:75});
            jQuery(this).find('a.top-level').removeClass("blue");
            });
        });












Styles:

HTML:
  1. <ul id="mainmenu">
  2. <li><a href="/" style="background-position: 0px 0px;">Home</a></li>
  3. <li><a href="" class="top-level" style="background-position: 0px 0px;">Example Top <span> </span></a>
  4. <ul style="visibility: hidden; display: none;">
  5. <li><a href="" style="background-position: 0px 0px;">Example Bot</a></li>
  6. </ul>
  7. </li>
  8. <li><a href="" class="top-level" style="background-position: 0px 0px;">Example Top <span> </span></a>
  9. <ul style="visibility: hidden; display: none;">
  10. <li><a href="" style="background-position: 0px 0px;">Example Bot</a></li>
  11. </ul>
  12. </li>
  13. <li><a href="" class="top-level" style="background-position: 0px 0px;">Example Top <span> </span></a>
  14. <ul style="visibility: hidden; display: none;"><li>
  15. <a href="" style="background-position: 0px 0px;">Example Bot</a></li>
  16. </ul>
  17. </li>
  18. </ul>