title: CSS/Menu: How to position element right below/beside elements
body: <p>Suppose I have markup as setup </p>
  
  <p><a href="http://jsfiddle.net/ADxne/" rel="nofollow noreferrer">http://jsfiddle.net/ADxne/</a></p>
  
  <p>Currently drop downs look like </p>
  
  <p><img src="https://imgur.com/NBm0H.jpg" alt=""></p>
  
  <p><img src="https://imgur.com/m6RZT.jpg" alt=""></p>
  
  <p>To solve the 1st problem, I could add a <code>margin-top</code> to child ul's to compensate for padding in list items <a href="http://jsfiddle.net/ADxne/1/" rel="nofollow noreferrer">http://jsfiddle.net/ADxne/1/</a></p>
  
  <pre><code>.horMenu &gt; li &gt; ul {
      margin-top: 10px;  
  }
  </code></pre>
  
  <p>but for the 2nd problem without a fixed width list or list items, is there a way to position the sub menu to the right of the list item? Or is the only way to set a fixed width? <a href="http://jsfiddle.net/ADxne/2/" rel="nofollow noreferrer">http://jsfiddle.net/ADxne/2/</a></p>