Transition effect for a menu pointer arrow?

Hi everyone,

I need a little help adding some finishing touches for the site I’m working on. See MSM Driving School

For the main navigation at the top I’d like to have the arrow pointer transition smoothly both on hover of each page link, and of course move over smoothly as the user switches to a different page.

I’m aware that the background-position CSS property can be transitioned, but I don’t know how to implement this fully, or indeed what the trigger would need to be. I’m also using a little jQuery so if I need to combine CSS3 with that for the correct triggers that’s fine.

Will I need to do away with my class=“current” system entirely? I’m assuming I might need to put the arrow as a bg-image in the div #main_nav.

Any advice is greatly appreciated.