Jquery 기반 드롭 다운 탐색 메뉴

Question

애니메이션 메뉴를 만들려고합니다. JS 파일은 내 페이지의 소스를 보면 사용할 수 있습니다. 기본적으로 작동합니다.

내 질문은입니다. 메인 메뉴에서 무엇인가를 가리키고 바로 아래로 올라 오는 하위 메뉴로 이동하면, 그 메뉴에있는 항목 위로 마우스를 가져 가면 그대로 둡니다.

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

내가 직접 예를 줄 것이다 덜 혼란 스러울하기 : 당신은 "채용 정보"똑바로 아래로 이동하고 반복해서 가져가 "직원 스토리 '위에 마우스를 올려 경우

를 다음으로 이동하여 마우스를 완전히 내려 놓으면 메뉴가 계속 "커리어"위로 마우스를 가져갈 때까지 계속 남아 있습니다.

도움이 될 것입니다.

편집 : 나는 그것이 내가이 링크 (그들은 숨겨진 드롭 다운에있는 것들) 내 드롭 다운 DIV 남아 위에 마우스를 올려 때마다 a href="# class="subMenuFloat" 함께 할 수있는 뭔가가 있음을 발견하고있다. 왜 이런 일이 일어나는 지 알 수는 없지만, 내가 단순히 리 위로 마우스를 가져 가서 링크를 놓친다면 제대로 종료됩니다.

Answer 1

데모 : 메뉴 - 플러그인을 사용하지 않고http://jsbin.com/welcome/13456

예를 들어,이 개념의 단지 증거

$(function() { 
    var flag = false; 
    $('#mainMenu li.mainMenuItems').hover(function() { 
     if (!flag) 
      $(this).find('.submenu').slideDown(500); 

    }, function() { 
     if (!flag) 
      $(this).find('.submenu').slideUp(500); 
    }); 

    $('#mainMenu li.mainMenuItems .submenu').hover(function() { 
     flag = true; 
    }, function() { 
     $(this).slideUp(500); 
     flag = false; 
    }); 
}); 

Answer 2

사용되는 선택기가 실제로 한 요소에서 다른 요소로 이동하기 때문에 jquery에서 호버 기능을 사용할 때 일반적인 문제입니다. 여기에 내가 한 일이 있습니다. 기본적으로 메뉴의 li 안에 div 나 li을 설정합니다. 예 : JQuery와 기본적으로 이것은 당신이 메뉴에서 리 위에 마우스를 올려 때 말하는

을 것

, 당신의 드롭 다운의 모든 메뉴는 다음을 보여줄 것 해당 메뉴 아래의 모든 사업부를 숨기 그 아래에있는 div는 공중에 떠있는 것입니다. li 포지션 상대와 div 절대를 만들어야합니다. 그래서 이론적으로 div는 li 아래에 포함되어 있으므로 마우스를 올리면 열려있을 것입니다.

$(".menu-hover li").hover(function(){ 

//Hide each div on hover 
    $(".menu div").each(function(){ 
    $(this).hide(); 
    }); 

    $("div", this).show(); 
});