title: Is there a way to force a jQuery UI menu submenu to always position up instead of down?
body: <p>I have a simple jQuery UI menu with a header bar over the top:</p>
  
  <pre><code>&lt;div style="width: 100%; min-height: 100px;"&gt;&lt;/div&gt;
  &lt;ul id="menu" style="width: 100px;"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $("#menu").menu();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/uW44Y/" rel="nofollow noreferrer">http://jsfiddle.net/uW44Y/</a>  </p>
  
  <p>Is there a way I can force the submenu from Item 3 to <strong>always</strong> open up from it's heading instead of down?</p>
  
  <p><img src="https://i.stack.imgur.com/EL6X4.png" alt="menu"></p>