如何停止我的JQuery菜单离开屏幕以获得更大的菜单？

我有一个 JQuery菜单,我需要始终在屏幕上保持可见状态.因此,如果子菜单与窗口底部重叠,它应该“向上”移动.

例如

它似乎适用于较小的菜单(例如5件或更少),但奇怪的是更大的菜单似乎永远不会向上移动.

jsfiddle example-比较菜单项C> 1E到C> 1F(您可能需要调整窗口大小以使它们实际上与底部重叠)

即

HTML：

<div id="container" style="width: 250px;">
          <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>C</a>
              <ul>
                <li><a href="#">1A</a></li>  
                <li><a href="#">1B</a></li> 
                  <li><a href="#">1C</a></li> 
                  <li><a href="#">1D</a></li> 
                  <li><a href="#">1E</a>
                      <ul>
                  <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                      <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                          <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">6</a></li>

                      </ul>
                  </li> 
                  <li><a href="#">1F</a>
                  <ul>
                     <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a></li>
                                        <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a></li>                   
                  </ul>
                </li>
              </ul>
            </li>
          </ul> 
</div>

CSS：

$('#filter-menu-button-menu').menu({
    "position": { my: "right top",at: "left top" }
});

任何人都可以建议为什么会这样吗？这是JQuery UI中的错误吗？任何人都可以建议解决方法？

解决方法

您可能想要查看 .position()的碰撞选项

Working Example

$('#filter-menu-button-menu').menu({
    "position": {
        my: "right top",at: "left top",collision: 'flipfit'
    }
});

“flipfit”: First applies the flip logic,placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.