從菜單中獲取父標籤

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當您使用第二種，您可以將子菜單懸停在所有您想要的位置上，但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'); 
    } 
);