호버 위에 서브 메뉴를 표시하고 그대로 두십시오.

Question

메뉴 항목 위로 마우스를 가져 가면 배경색이 변경되고 하위 메뉴가 표시됩니다. 메뉴 항목을 하위 메뉴로 마우스를 이동할 때 하위 메뉴를 계속 표시하고 변경 배경을 유지하려면 어떻게합니까?

내 HTML

<div class="shoplink"><a>Online Shop</a></div> 
<div id="shop-menu"> 
      <ul> 
       <li>Food</li> 
       <li>Home & Living</li> 
       <li>Personal Assistance</li> 
       <li>Kids</li> 
       <li>Musical Instruments</li> 
       <li>Beauty & Wellbeing</li> 
       <li>Outdoor</li> 
       <li>Office & Stationery</li> 
       <li>Cards & Gift Paper</li> 
       <li><b>Browse All</b></li> 
      </ul> 
     </div> <!-- #shop-menu --> 

내 JS 지금까지 .... 내가 .sublink 위에 마우스를 올려 때

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).toggleClass('activeitem'); 
    $('#shop-menu').toggle(); 
}); 

그래서 내가 가게 메뉴를 표시 할 수 있습니다. .shoplink에서 # shop-menu로 마우스를 움직이면 아이템을 선택할 수 있습니다. 메뉴 항목 내부의 드롭 다운을 넣어

Answer 1

내가 당신 toogles를 표시하고 메뉴를 숨기고 있다고 생각 ... 시도 :

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).addClass('activeitem'); 
    $('#shop-menu').show(); 
}); 

다시 변경하려면 @Madhu Rox의 답변을 확인하십시오. 그리고 그렇게 할 : 페이지의 다른 조치가 닫을하고 다시 싶어 경우

$('#shop-menu').live('mouseleave', function(e) { 
    $('.shoplink').removeClass('activeitem'); 
    $('#shop-menu').hide(); 
}); 

을 또한 unbind 호버 $(this).unbind('hover'); 같은 이벤트,하지만 그때는, 당신은 호버 이벤트를 리 바인드해야 할 것입니다 수 .

Answer 2

한번에 너무 많은

감사

<div class="shoplink"> 
    <a>Online Shop</a> 
    <div id="shop-menu"> 
      <ul> 
       <li>Food</li> 
       <li>Home & Living</li> 
       <li>Personal Assistance</li> 
       <li>Kids</li> 
       <li>Musical Instruments</li> 
       <li>Beauty & Wellbeing</li> 
       <li>Outdoor</li> 
       <li>Office & Stationery</li> 
       <li>Cards & Gift Paper</li> 
       <li><b>Browse All</b></li> 
      </ul> 
    </div> <!-- #shop-menu --> 
</div> 

데모 : http://jsfiddle.net/cU629/이

Answer 3

은 당신의 코드가

<div class="shoplink"> 
    menu item 
    sub menu 
</div> 

처럼 또는 이전 응답으로 될 것입니다 전체 서브 메뉴와 <div class="shoplink">

와 메뉴 항목을 포장하기 위해 HTML을 변경

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).addClass('activeitem'); 
    $('#shop-menu').show(); 
}); 

에 자바 스크립트를 업데이트

또한 다음 코드를 추가하십시오.

$('#shop-menu').live('mouseleave', function(e) { 
    $('.shoplink').removeClass('activeitem'); 
    $('#shop-menu').hide(); 
});