親メニューからタグを取得

Question

私はドロップダウンメニューを持っていますが、問題はメインメニューからメインメニューからマウスを外してドロップダウンメニューにすると、親要素のホバー効果が消えることです。私はこのような何かやってみました

：

$("nav#main-nav ul li #submenu").hover(
    function() { 
    //alert($(this).closest(["li", "a"])); 
    $(this).closest(["li", "a"]).css('border-bottom', '8px solid #000'); 
    } 
); 

しかし、これは動作しません:( メニューは次のようになります。

<nav id="main-nav"> 
    <ul> 
    <li> 
     <span><a href="#" class="blue">Social & Sundhed</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="orange">Pædagogisk</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="green">Kost & Service</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="yellow">Teknik-Service</a></span> 
     <ul id="submenu"> 
     <div class="inner"> 
      <div class="border-top"></div> 
      <div class="submenu-left"> 
      <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li> 
      <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li> 
      <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li> 
      <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li> 
      </div> 
      <div class="submenu-right"> 
      <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li> 
      <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li> 
      <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li> 
      <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li> 
      </div> 
      <div class="clearfix"></div> 
      <div class="border-bottom"></div> 
     </div> 
     <div class="clearfix"></div> 
     </ul> 
     <div class="clearfix"></div> 
    </li> 
    </ul> 
</nav> 

Answer 1

あなたは上のホバーを持ってください。 LI A:hoverまたはLI:hover a cus 2番目を使用する場合、サブメニューを任意の位置に移動できますが、Aの:hoverはアクティブのままです。これはCSSで行うことができます。

#main-nav li:hover a 
{ 
    // Hover of the A 
} 

Answer 2

おそらくjQuery.parentを試してみてください。

$("nav#main-nav ul li #submenu").hover(
    function() { 
     $(this).parent().css('border-bottom', '8px solid #000'); 
    } 
);