title: CSS - Auto height of an element containing absolute positioned children?
body: <p>on the site I am currently developing I have a <code>&lt;nav&gt;</code> element containing a 2 leveled <code>&lt;ul&gt;</code>, I am absolute positioning the sub list (<code>nav ul li ul</code>) to the right of the main list.</p>
  
  <p>The problem I am having is when the sub list is longer (taller) than the main list, due to the sub list being absolutely positioned, the  element is not stretching to accommodate it. See the below image for an example of what I mean.</p>
  
  <p><img src="https://i.stack.imgur.com/d0nHs.gif" alt="enter image description here"> </p>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;List 1&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;List 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;&lt;!-- /nav --&gt;
  </code></pre>
  
  <p>Any idea of a solution to this? Ideally I would like to keep it as a nested list for semantic reasons.</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Please see the following jsFiddle for a working example - <a href="http://jsfiddle.net/TcYBQ/" rel="nofollow noreferrer">http://jsfiddle.net/TcYBQ/</a></p>