JQuery 호버 & 드롭 다운 메뉴

Question

JQuery를 사용하여 웹 사이트의 드롭 다운 메뉴에 문제가 있습니다.

기본적으로 내가 달성하고 싶은 것은 JQuery의 마우스를 가져 가면서 간단한 수평 드롭 다운 메뉴 (Drupal의 DHTML 메뉴 모듈에서)입니다. 그러나, 내가 고칠 수없는 몇 가지 성가심이 있습니다.

그래서 주 메뉴와 그 자식 <li>는 모두 링크입니다. 하위 메뉴 중 하나를 클릭하면 모든 것이 정상적으로 처리됩니다 (대상에 직접 연결됨, 정상적인 숨겨진 상태로 재설정 됨). 그러나 부모 메뉴를 클릭하면 대상에 도착한 후 드롭 다운 메뉴가 다시 설정 되더라도 마우스가 링크 위로 여전히 움직입니다. 마우스를 움직이면 드롭 다운이 다시 활성화됩니다.

내가 원하는 것은 드롭 다운이 마우스가 요소를 입력 할 때만 활성화되고 종료 할 때 활성화되지 않는다는 것입니다. .hover()을 .mouseenter()과 .mouseleave()으로 분리하려고 시도했지만이 대신 드롭 다운이 전혀 작동하지 않습니다. 도움!

내 코드는 다음과 같습니다 :

$(li).hover(function(e) { 
    Drupal.dhtmlMenu.expandMenu($(li)); 
}, 
function(e) { 
    Drupal.dhtmlMenu.collapseMenu($(li)); 
}); 

$(li).ready(function(e) { 
    Drupal.dhtmlMenu.collapseMenu($(li)); 
}); 

Answer 1

Nice Menus 모듈을 사용하십시오. 이 두통에서 당신을 구할 수 있습니다. 3 년 전부터 드루팔 (Drupal)을 시작한 이래로 나는 그것을 사용 해왔다.

Answer 2

절대적으로 필요 간단한 드롭 다운 메뉴에 대한 자바 스크립트를 사용할 수 없습니다. http://webdesignerwall.com/tutorials/css3-dropdown-menu을 참조하십시오 (CSS3는 사용되지만 기본 CSS는 모든 브라우저에서 작동합니다). 순전히 CSS/HTML로하십시오