Question

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?

Answer 1

If you put your background fading on the li instead of on the a tag it’ll still be activated when you hover over the sub menu items because they’re inside of the li. Try replacing your existing jQuery code with the following code:

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