jquery drop down menu. keep the top item selected without bubling
I have a drop down menu that has fading background images done by haveing a span that is a sibling of the a and has the full demensions of the parent li. the html and css are as follows.

        <div id='header'>
    	<ul>
		<li><span></span><a href='#' title='' class='a1'>Pianos</a>
			<ul>
			<li><span></span><a href='#' title='' class='a1'>New</a></li>
			<li><span></span><a href='#' title='' class='a1'>Used</a></li>
			</ul>
		</li>
		<li><span></span><a href='#' title='' class='a1'>Accessories</a></li>
		<li><span></span><a href='#' title='' class='a1'>Locations</a></li>
		<li><span></span><a href='#' title='' class='a1'>Contact</a></li>
	</ul>
        </div>

        *
        {
                margin:0px;
                padding:0px;
                position:relative;
        }
        #header>ul li
        {
	        display:inline-block;
	        margin-left:-4px;
	        width:150px;
	        height:100%;
	        border-right:2px solid #000000;
	        text-align:center;
        }
        #header>ul li>a
        {
	        display:block;
	        padding-top:5px;
        }
        #header>ul li>span
        {
	        display:block;
	        position:absolute;
	        top:0px;
	        left:0px;
	        width:100%;
	        height:100%;
	        background:url('naviOn.jpg');
	        display:none;
       }
       #header>ul>li>ul
       {
	       display:none;
	       position:absolute;
	       top:40px;right:0px;
	       background:url('naviOff.jpg');
       }
       #header>ul>li>ul>li
       {
	       border:none;
	       height:40px;
       }

What my jquery does is it fade in the span that is the previous sibling of the a that you are hovering over. additionally if there is a ul inside the li it will slideDown. what i'm having trouble with is making the top span stay as i hover over the drop down elements. currently it works but if i hover ofer just the top element it the span will remain hidden until i hover over the drop down anchors. jquery code below.

    	$('#header>ul a').hover(function()
	{
		$(this).prev('span').stop(true, true).fadeToggle(500);
	}, function()
	{
		$(this).prev('span').stop(true, true).fadeToggle(500);
	})
	$('#header>ul>li').hover(function()
	{
		$(this).children('ul').stop(true, true).slideToggle(250);
		$(this).children('span').css({display: 'block'});
	},function()
	{
		$(this).children('ul').stop(true, true).slideToggle(250);
		$(this).children('span').fadeOut(500);
	})

any ideas on how to get this to work?
jquery drop down menu. keep the top item selected without bubling
===

I have a drop down menu that has fading background images done by haveing a span that is a sibling of the a and has the full demensions of the parent li. the html and css are as follows.

        <div id='header'>
    	<ul>
		<li><span></span><a href='#' title='' class='a1'>Pianos</a>
			<ul>
			<li><span></span><a href='#' title='' class='a1'>New</a></li>
			<li><span></span><a href='#' title='' class='a1'>Used</a></li>
			</ul>
		</li>
		<li><span></span><a href='#' title='' class='a1'>Accessories</a></li>
		<li><span></span><a href='#' title='' class='a1'>Locations</a></li>
		<li><span></span><a href='#' title='' class='a1'>Contact</a></li>
	</ul>
        </div>

        *
        {
                margin:0px;
                padding:0px;
                position:relative;
        }
        #header>ul li
        {
	        display:inline-block;
	        margin-left:-4px;
	        width:150px;
	        height:100%;
	        border-right:2px solid #000000;
	        text-align:center;
        }
        #header>ul li>a
        {
	        display:block;
	        padding-top:5px;
        }
        #header>ul li>span
        {
	        display:block;
	        position:absolute;
	        top:0px;
	        left:0px;
	        width:100%;
	        height:100%;
	        background:url('naviOn.jpg');
	        display:none;
       }
       #header>ul>li>ul
       {
	       display:none;
	       position:absolute;
	       top:40px;right:0px;
	       background:url('naviOff.jpg');
       }
       #header>ul>li>ul>li
       {
	       border:none;
	       height:40px;
       }

What my jquery does is it fade in the span that is the previous sibling of the a that you are hovering over. additionally if there is a ul inside the li it will slideDown. what i'm having trouble with is making the top span stay as i hover over the drop down elements. currently it works but if i hover ofer just the top element it the span will remain hidden until i hover over the drop down anchors. jquery code below.

    	$('#header>ul a').hover(function()
	{
		$(this).prev('span').stop(true, true).fadeToggle(500);
	}, function()
	{
		$(this).prev('span').stop(true, true).fadeToggle(500);
	})
	$('#header>ul>li').hover(function()
	{
		$(this).children('ul').stop(true, true).slideToggle(250);
		$(this).children('span').css({display: 'block'});
	},function()
	{
		$(this).children('ul').stop(true, true).slideToggle(250);
		$(this).children('span').fadeOut(500);
	})

any ideas on how to get this to work?