jquery hover - change background

jquery hover - change background

I have a drop-down sub-menu that toggles nicely.
When in it's loaded state 'nav ul li a' has a background image of
'arrow-r.png' When hovered and the submenu shows, I would like the
background image ot instead show 'arrow.png'
I enclose the HTML, the relevant CSS and the jquery.
And for bonus points is there any way the background image can rotate from
one state to the the next?
HTML:
<nav>
<ul>
<li><a href="#">Home</a>
<ul">
<li><a href="#">Account Details</a>
<li><a href="#">Packages</a>
<li><a href="#">Reference</a>
<li><a href="#">Information</a>
<li><a href="#">Registration</a>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul.level0 a {
background-image:url('images/arrow-r.png');
background-repeat:no-repeat;
}
And finally (and where I suspect the issue to be - jQuery:
$(function () {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(function () {
$('nav ul.level0 > li >
a').css('background-image','url(images/arrow.png');
$('ul', this).stop().slideToggle(200);
});
});