How can I stop my jQuery menu exiting the screen for large menus?

Question

I have a jQuery menu that I always need to stay on screen at all times. Therefore, if the child menu overlaps the bottom of the window, it should move up.

eg

It seems to work fine for small menus (like 5 items or less), but strangely large ones seem to never move.

jsfiddle example - compare menu items C> 1E-C> 1F (you may have to resize the window so that they actually overlap at the bottom)

i.e.

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" }
});

Can anyone guess why this is happening? Is this a bug in the jQuery user interface? Can anyone suggest a workaround?

Answer 1

. position()

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

"flipfit": , . , .