title: How can I get my JQuery UI menu position to always fit on screen and open to the right
body: <p>I'm trying to create a JQuery menu that:</p>
  
  <ol>
  <li><p>Always opens its children to the right</p></li>
  <li><p>Always flips its position where required so that it never
  disappears off the bottom of the screen.</p></li>
  </ol>
  
  <p><em>i.e.</em> Something like this...</p>
  
  <p><img src="https://i.stack.imgur.com/LR1m7.png" alt="enter image description here"></p>
  
  <p>I expected the following would work...</p>
  
  <pre><code>    $('#filter-menu-button-menu').menu({
           position: {
                  my: "right top",
                  at: "left top"
           }
      });
  </code></pre>
  
  <p>...but it only seems to work for the first child. The second child appears to the left of it (<a href="http://jsfiddle.net/tAH6a/1/" rel="nofollow noreferrer">jsfiddle example</a>).</p>
  
  <p>Can anyone suggest what I am doing wrong.</p>