[jQuery] Change bg image on hover

[sammahoney]

Hi guys

I have a dropdown menu. When the dropdown is hovered, I need a bg
image to show, then slowly fade out when the mouse leaves. I wrote
this little script for it:

var $j = jQuery.noConflict();

$j(function(){

    $j("#dropdown-nav li ul li").mouseover(function(){
                $j(this).stop().before('<li class="hoverbg"></li>');

    }),

        $j("#dropdown-nav li ul li")
                .mouseleave(function(){
                        $j("#dropdown-nav li ul 
li.hoverbg").stop().fadeOut(300, function()
{
                                      $j(this).remove();
                                                });
                    })
});

So it adds an extra li above the one being hovered (which via css is
positioned absolutely so the next li displays over the top). Anyways,
it works fine, but sometimes when hovering it adds 2 or 3 li's in
there. I thought the stop() would sort that, but it hasn't.

Any ideas why that's happening? And could this be written better? It's
one of my first attempts with jQuery so go easy on me!