title: jQuery UI Menu Positioning Issues
body: <p>I'm trying to use jQuery UI to create a dropdown menu on a site that I'm working on. It looks okay at first glance, but the starting position of the nested <code>ul</code> elements seem to be blocking the next link in the menu. The blue box is what appears when I hover over the nested <code>ul</code> in Firebug and prevents hovering over "Link 2" How can I move this align this with the actual menu? Thank you!</p>
  
  <p><img src="https://i.stack.imgur.com/3iVMe.png" alt="Menu"></p>
  
  <p>The sub-links in grey work fine.</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;Link 1
  &lt;ul&gt;
  ...
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Link 2&lt;/li&gt;
  &lt;li&gt;Link 3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  #nav ul {
      list-style-type: none;
      float:right;
  }
  
  #nav ul li ul {
      position:absolute;
      width: 200px;
  }
  
  #nav ul li ul li {
      display: block;
      position:relative;
      top:40px;
      left:-165px;
  }
  </code></pre>