hover the div, change its color by css sprite, then fadein another div?

Question

I'm not so good at writing codes, but I want to know how to write javascript like this:

First, hover the div( '#menu1 a' in below) and change its color by CSS sprite.

Next, at the same time I want to fadein another div('#menu1_submenu') near it ('#menu1 a') .

$(document).ready(function()
{$('#menu1 a').hover(
function(){ 
        $('#menu1 a').css('background-position', '0 -30px');
        $('#menu1_submenu').fadeIn('slow');
},
function(){
        $('#menu1 a').css('background-position', '0 30px');
        $('#menu1_submenu').fadeOut('slow');
}
);
});

The second function I meant is when the mouse is off the div('#menu1 a') . When the mouse is off, I would like to move '#menu1 a ' back to first position, so I wrote '0 30px' there. Is this ok?

Oh, and I have another thing I would like to ask you guys:

When '#menu1 a' is hovered and '#menu1-submenu' appeared, I want to keep '#menu1_submenu' appeared even if the mouse is off from '#menu1 a' , because the second div is a submenu. That means, when the mouse is off from '#menu1_submenu' , it will finally fade out. How do you set that?

Would you please help me out? :)

Answer 1

The best way is to put your submenu inside hovering element.

<div id="menu1">
  <a>Menu
    <div class="submenu">
        submenu
    </div>
  </a>
</div>

Check out this fiddle: http://jsfiddle.net/ewN3k/