jQuery 하위 메뉴 - 위치()가 작동하지 않습니다.

Question

하위 메뉴를 만들려고합니다. 그러나 jQuery UI의 position() 함수는 하위 메뉴를 올바른 위치 (해당 메뉴 항목의 오른쪽)에 배치하지 않습니다. 하위 메뉴가 잘린 것처럼 나타납니다.

<script> 
    $(function() { 
     $('.menu').hide(); 

     $('#action').on('mouseenter', function() { 
      var menu = $('#menu'); 
      menu.show(); 
      menu.position({ 
       of: this, 
       my: 'left top', 
       at: 'left bottom' 
      }); 
     }); 

     $('.menuItem').on('mouseenter', function() { 
      var menu = $(this).find('.menu'); 
      menu.show(); 
      menu.position({ 
       of: this, 
       my: 'left top', 
       at: 'right top' 
      }); 
     }); 
    }); 
</script> 

<button id="action">Action</button> 
<div id="menu" class="menu"> 
    <div class="menuItem"> 
     <span>Item1</span> 
    </div> 
    <div class="menuItem"> 
     <span>Item2</span> 
    </div> 
    <div class="menuItem"> 
     <span>Item3</span> 
     <div class="menu"> 
      <div class="menuItem"> 
       <span>Item4</span> 
      </div> 
      <div class="menuItem"> 
       <span>Item5</span> 
      </div> 
      <div class="menuItem"> 
       <span>Item6</span> 
      </div> 
     </div> 
    </div> 
</div> 

도움 주셔서 감사합니다.

Answer 1

문제는 CSS와 같은

.menu{ border: 1px solid #333;display:inline-block;wdth:100%;position:absolute;} 
.menuItem{ border: 1px solid red;} 

appky 위의 CSS로하고 대답이 바이올린을 확인합니다. "절대"의 "위치"를 설정 :-)

http://jsfiddle.net/2xxy3acx/