jqueryドロップダウンメニュー。ぼんやりしないでトップアイテムを選択したままにする

Question

私は、aの兄弟でスパンを持っているフェードバックグラウンドイメージを持つドロップダウンメニューがあり、親liの完全なデメンションを持っています。 htmlとcssは以下の通りです。私のjqueryのは何

<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; 
    } 

は、それはあなたが上をホバリングしているAの前の兄弟であるスパンでフェードインです。さらにliの中にulがある場合、それはslideDownになります。私が問題を抱えているのは、ドロップダウン要素の上にマウスを置くと、トップスパンを維持することです。現在はうまくいきますが、上の要素だけをホバーすると、ドロップアンカーの上にカーソルを置くまで、スパンは隠れたままです。 jqueryコードを以下に示します。

$('#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); 
}) 

これを動作させる方法に関するアイデアはありますか？

Answer 1

aタグの代わりにliに背景を薄くすると、サブメニュー項目の上にマウスを置くとliの内側にあるため、引き続きアクティブになります。既存のjQueryコードを次のコードに置き換えてみてください。

$('#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); 
});