I've been playing around with Dojo over the last couple of days.

The script below changes the background position of the list item when the mouse is over the link.

dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {

dojo.connect(linkTwo, "onmouseover", function(evt) {

dojo.query('#main-menu ul li').forEach(function(linkThree) {


dojo.style(linkThree, {

"backgroundPosition": "right center",

});

});

You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/

I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.