호버 (hover)에 서브 메뉴를 생성하고 맨 위로 만들기

Question

jover를 사용하여 호버 (hover)에 서브 메뉴를 만듭니다.

<div id="menucontainer"> 
    <ul id = "topmenu"> 
    <li><a onmouseover="javascript:show('div_1');">menu_1</a></li> 
    <li><a onmouseover="javascript:show('div_2');">menu_2</a></li> 
    <li><a onmouseover="javascript:show('div_3');">menu_3</a></li> # fine with onmouseover since code is generated from templates 

    </ul> 
    <div id="div_1" class="submenu"> 
    <ul> 
     <li> submenu_1 </li> 
     <li> submenu_2 </li> 
     <li> submenu_3 </li> 
    </ul> 
    </div> 
    <div id="div_3" class="submenu"> 
    <ul> 
     <li> submenu_1 </li> 
     <li> submenu_2 </li> 
     <li> submenu_3 </li> 
    </ul> 
    </div> 
    <div id="div_3" class="submenu"> 
    <ul> 
     <li> submenu_1 </li> 
     <li> submenu_2 </li> 
     <li> submenu_3 </li> 
    </ul> 
    </div> 
</div> 
<style> 
#topmenu { 
    list-style: none; 
} 
#topmenu > li { 
    display: inline-block; 
} 
.submenu { 
    display: none; 
} 

<script> 
function show(divid) { 
    $('.submenu').css('display', 'none'); 
    $('#'+divid).css('display', 'block'); 
} 
</script> 

문제가 show(div)를 호출하고 하위 메뉴 사업부가 표시 될 때, 나는 "menucontainer"그 DIV 블록 후 다른 사업부가 있음을 표시 사업부에 클릭 수 있습니다 :

여기의 모습입니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

HTML을 좀 더 단순하게 재구성했습니다. 또한 인라인 함수 호출보다는 이벤트 리스너를 사용하는 것이 좋습니다. 이 문제가 귀하의 경우에 효과가 없을 경우 알려주십시오.

http://jsfiddle.net/Dn2mv/5

<div id="menucontainer"> 
    <ul id="topmenu"> 
     <li><a href="#">menu_1</a></li> 
     <li><a href="#">menu_2</a></li> 
     <li><a href="#">menu_3</a></li> 
    </ul> 
    <div id="div_1" class="submenu"> 
     <ul> 
      <li>submenu_1</li> 
      <li>submenu_1</li> 
      <li>submenu_1</li> 
     </ul> 
    </div> 
    <div id="div_2" class="submenu"> 
     <ul> 
      <li>submenu_2</li> 
      <li>submenu_2</li> 
      <li>submenu_2</li> 
     </ul> 
    </div> 
    <div id="div_3" class="submenu"> 
     <ul> 
      <li>submenu_3</li> 
      <li>submenu_3</li> 
      <li>submenu_3</li> 
     </ul> 
    </div> 
</div> 

$('#topmenu li a').hover(function() { 
    var myItem = $(this).parents('li').index() + 1; 
    $('#div_' + myItem).slideDown(); 
}, function() { 
    $('.submenu').hide(); 
});