title: Align dropdown elements with absolute position
body: <p>I am trying to create a simple Drop Down box as in Twitter: </p>
  
  <p><a href="https://about.twitter.com/products" rel="nofollow">https://about.twitter.com/products</a> (Click on the language item).</p>
  
  <p>For this I using the following HTML:</p>
  
  <pre><code>&lt;a href="#language"&gt;English&lt;/a&gt;
  &lt;div class="popup" id="language"&gt;
    &lt;ul&gt;
      &lt;li&gt;Portuguese&lt;/li&gt;
      &lt;li&gt;English&lt;/li&gt;
      &lt;li&gt;French&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EXAMPLE: <a href="http://codepen.io/mdmoura/pen/upIjv" rel="nofollow">http://codepen.io/mdmoura/pen/upIjv</a>. </p>
  
  <p>I would to:</p>
  
  <p>1 - The drop downs to align to their link triggers;</p>
  
  <p>2 - Being able to left align or right align the dropdowns to their triggers.</p>
  
  <p>How can I do this?</p>
  
  <p>Thank You,
  Miguel</p>