Hi experts....
Thanks to Joel B for a nice  menu  solution. I am a total newbi to jQuery and Superfish and am happy to report I have it working fine  except.....
Currently, I have a background image that works fine for static state and hover state, I now would like to highlight the current page by adding a class to the appropriate LI or A tag in the list. I just cant get it to work.

I use a common image for the 3 states The image has 3 areas, Centre for the static condition, Top for the hover condition and Bottom for the current page state.

I have checked that all 3 condtions (top, centre and bottom areas) can be displayed. But still cant figure out why I cant make the current condition work.

Below is a portion of my portion of my CSS:

1. .sf-menu li:hover, .sf-menu li.sfHover,
   .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
       outline:        0;
       background-image:url(../../images/green-nav-1.gif);
       background-position: top right !important;
       background-repeat: no-repeat;
   }
   /*  */
   sf-menu li a.currentpage {
       outline:        0;
       background-image:url(../../images/green-nav-1.gif);
       background-position: bottom right !important;
       background-repeat: no-repeat;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   

And here is a potion of my menu (its dynamically generated by PHP - the PHP is omitted)

1. <li><a class="currentpage" href="index.php?page=">pagelink</a> etc...
   

I have assumed that by adding a class to the LI or the A tag would be all thats needed. If not then I am stuck.
I hope that someone out there can help with what is most probably a trivial error by me. Or - its a "feature" that I am unaware of.
Cheers all.