jQuery Dropdown

Question

jQuery 드롭 다운을 만들었지 만 자식 링크 중 하나가 롤오버 될 때 확장 된 상태로 유지할 수 없습니다.

코드 :

<li> 
    <a onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a> 
     <ul class="dropdown-1"> 
     <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
     <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li> 
     <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li> 
     </ul> 
    </li> 

Answer 1

HTML :

<li id="menu"> 
    <a href="/hosting">Why Veoloo</a> 
    <ul class="dropdown-1"> 
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li> 
    <li><a href="#">Our Support Scope</a></li> 
    </ul> 
</li> 

스크립트 :

$(function(){ 
    $('.dropdown-1').hide(); 
    $('#menu').hover(function(){ 
     $('.dropdown-1').slideDown('medium'); 
    }, function(){ 
     $('.dropdown-1').slideUp('medium'); 
    }); 
}) 

예 :

http://jsfiddle.net/gurPn/1/

[EDIT] 호버 방법 (jQuery를) 및 트리거를 사용하여 업데이트부모 컨테이너로부터 떨어져있는 hove (이것은 mouseleave 이벤트가 원하는 드롭 다운 효과를주는 컨테이너에서만 캡처 될 수 있습니다).

Answer 2

난 당신이 이상 마우스와 마우스를 사용하는 것 같은데요? (귀하는 귀하의 코드를 게시하지 않았습니다). 문제는 마우스 오버 이벤트를 발생시키는 이벤트에서 마우스를 끄는 요소가있는 경우입니다. 마우스 센터가이를 정리합니다. 드롭 다운은 부모 요소의 자식 요소 여야 드롭 다운됩니다. 당신은 원인이됩니다 태그에 onMouseover와 직접 사용하여 첫 번째 LI

<li id="dropdown"> 
    <a href="/hosting">Why Veoloo</a> 
    <ul class="dropdown-1"> 
     <li ><a href="#">The Reasons (15)</a></li> 
     <li ><a href="#">Customer Testimonials</a></li> 
     <li ><a href="#">Our Support Scope</a></li> 
    </ul> 
</li> 


    <script type="text/javascript"> 
    $(document).ready(function(){ 

    $("#dropdown").mouseenter( 

에 기능을 배치해야합니다 http://sdfreelance.vistapanel.net/

업데이트

에서

<script type="text/javascript"> 
$(document).ready(function(){ 

    $(".sidebar").mouseenter( 
     function pl(){ 
       $(".sidebar").stop().animate({width: "184px",left:"760px"},750,"linear"); 
} 
    ); 
    $(".sidebar").mouseleave( 
      function pl2(){ 
       $(".sidebar").stop().animate({left: "900px",width: "45px"},750,"linear"); 
      } 
    ); 

}); 
</script> 

온라인 예 필요한 모든 스크립트가로드되지 않은 경우 오류 b 마우스가 메뉴 위로 이동하기 전에.