빠른 jQuery 드롭 다운 메뉴를 만들려고합니다

Question

내가이 일을 제대로하고 있는지 확실하지 않지만 jQuery에서 간단한 드롭 다운 메뉴를 만들려고합니다. 기본적으로 메뉴 항목이마다 끝나면 DIV (링크 포함)가 나타나기를 원합니다.

메뉴:

<ul id="mainlevel">
  <li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
  <li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
  <li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>

숨겨진 div :

<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>

jQuery :

$(".mainlevel_feature-writers").hover(function(){ 
  $(".subMenu").fadeIn("slow"); 
}, function() { 
  $(".subMenu").fadeOut("slow"); 
});

이제, 이것은 숨겨진 div에서 사라져서 잘 사라지지만, 누군가가 새로 보여준 Div 내부의 무언가를 떠 다니면 어떻게 사라지는 것을 막을 수 있습니까?

이것이 정말 분명한 질문이라면 죄송합니다 .. 나는 아직도 배우고 있습니다! :)

Answer 1

나는 당신이 처리를 분리해야한다고 생각합니다 mouseover 그리고 mouseout 이벤트.

아마도 당신은 원합니다 mouseover "최상위"메뉴 요소에 첨부 할 핸들러와 mouseout 숨겨진 "드롭 다운"DIV에 첨부해야합니다 (충돌을 관리하기위한 일부 주 코드 포함).