title: Absolute element inherits parent width but I want it to stretch according its children
body: <p>I'm building a css-menu like this jsfiddle: <a href="http://jsfiddle.net/YXT7j/48/" rel="nofollow">http://jsfiddle.net/YXT7j/48/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;li&gt;&lt;a&gt;item 1&lt;/a&gt;
      &lt;ul class="sub" style="width: 200px;"&gt;
          &lt;li&gt;&lt;a&gt;item 1.1&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a&gt;item 1.2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;item 1.1.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;           
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;item 2&lt;/a&gt;
      &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a&gt;item 2.1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;item 2.2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;item 2.3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;item 3&lt;/a&gt;
      &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a&gt;item 3.1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;item 3.2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;item 3.3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#nav&gt;li {
      float: left; 
      margin: 0 10px;   
      position: relative;   
  }
  .sub {
      display: none;    
      position: absolute;
      top: 1em;
      left: 0;
  }
  .sub&gt;li {
      float: left; 
      width: 100px;        
  }
  #nav&gt;li:hover .sub {
      display: block;
  }
  </code></pre>
  
  <p>​
  ​</p>
  
  <p>Under item 1 you can see how there are 2 lists next to each other. Also in the html you see an inline width set. Without the inline width (or a css equivalent) the lists are shown underneath eachother instead of next to eachother ( <a href="http://jsfiddle.net/YXT7j/34/" rel="nofollow">http://jsfiddle.net/YXT7j/34/</a> ).</p>
  
  <p>Now the number of lists in the submenu is dynamic. That's why I can't set the width in css and I'm using inline-styles for now (100*numlists+'px'). But that's just ugly. 
  I'd like the submenu to resize to its li-children like any other element. Unfortunately, without a width set the submenu follows the width of its parent menu-item instead.</p>
  
  <p>So, tl/dr: How can I get <a href="http://jsfiddle.net/YXT7j/48/" rel="nofollow">http://jsfiddle.net/YXT7j/48/</a> without setting an explicit width on the ul.sub.</p>
  
  <p>Thanks!</p>