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/