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/