絕對元素繼承父寬度，但我希望它按照它的孩子舒展

Question

我建立這樣的jsfiddle一個CSS菜單：http://jsfiddle.net/YXT7j/48/

HTML：

<ul id="nav"> 
<li><a>item 1</a> 
    <ul class="sub" style="width: 200px;"> 
     <li><a>item 1.1</a> 
      <ul> 
       <li><a>item 1.1.1</a></li> 
       <li><a>item 1.1.2</a></li> 
       <li><a>item 1.1.3</a></li> 
      </ul> 
     </li> 
     <li><a>item 1.2</a> 
      <ul> 
       <li><a>item 1.1.1</a></li> 
       <li><a>item 1.1.2</a></li> 
       <li><a>item 1.1.3</a></li> 
      </ul>   
     </li> 
    </ul> 
</li> 
<li><a>item 2</a> 
    <ul class="sub"> 
     <li><a>item 2.1</a></li> 
     <li><a>item 2.2</a></li> 
     <li><a>item 2.3</a></li> 
    </ul> 
</li> 
<li><a>item 3</a> 
    <ul class="sub"> 
     <li><a>item 3.1</a></li> 
     <li><a>item 3.2</a></li> 
     <li><a>item 3.3</a></li> 
    </ul> 
</li> 
</ul> 

CSS：

#nav>li { 
    float: left; 
    margin: 0 10px; 
    position: relative; 
} 
.sub { 
    display: none;  
    position: absolute; 
    top: 1em; 
    left: 0; 
} 
.sub>li { 
    float: left; 
    width: 100px;   
} 
#nav>li:hover .sub { 
    display: block; 
} 

在第1項下，您可以看到如何有2個列表彼此相鄰。同樣在html中，您會看到一個內聯寬度集。沒有內聯寬度（或等效的CSS），列表將顯示在eachother下面而不是彼此相鄰（http://jsfiddle.net/YXT7j/34/）。

現在子菜單中的列表數量是動態的。這就是爲什麼我不能在CSS中設置寬度，現在我正在使用內聯樣式（100 * numlists +'px'）。但那真是醜陋。 我希望子菜單像其他任何元素一樣調整其子元素。不幸的是，如果沒有設置寬度，子菜單會改變其父菜單項的寬度。

所以，tl/dr：我怎樣才能得到http://jsfiddle.net/YXT7j/48/沒有在ul.sub上設置一個明確的寬度。

謝謝！

Answer 1

這是我的解決方案的JS-小提琴：http://jsfiddle.net/YXT7j/66/

你必須在子菜單內嵌塊中創建列表，而不是將它們浮動。然後你告訴子菜單不要用白色空格包裝內聯項目：nowrap;

這是一個類似的答案，我以前看過其他問題。儘管這些答案是爲了防止文本（標準是內聯）封裝，而不是完整的塊元素。

因此，爲了完整起見，代碼：

<ul id="nav"> 
    <li><a>item 1</a> 
     <ul class="sub multi"> 
      <li><a>item 1.1</a> 
       <ul> 
        <li><a>item 1.1.1</a></li> 
        <li><a>item 1.1.2</a></li> 
        <li><a>item 1.1.3</a></li> 
       </ul> 
      </li> 
      <li><a>item 1.2</a> 
       <ul> 
        <li><a>item 1.1.1</a></li> 
        <li><a>item 1.1.2</a></li> 
        <li><a>item 1.1.3</a></li> 
       </ul>   
      </li> 
     </ul> 
    </li> 
    <li><a>item 2</a> 
     <ul class="sub"> 
      <li><a>item 2.1</a></li> 
      <li><a>item 2.2</a></li> 
      <li><a>item 2.3</a></li> 
     </ul> 
    </li> 
    <li><a>item 3</a> 
     <ul class="sub"> 
      <li><a>item 3.1</a></li> 
      <li><a>item 3.2</a></li> 
      <li><a>item 3.3</a></li> 
     </ul> 
    </li> 
</ul> 
​ 

#nav>li { 
    float: left; 
    margin: 0 10px; 
    position: relative; 
} 
.sub { 
    display: none;  
    position: absolute; 
    top: 1em; 
    left: 0; 

    white-space: nowrap; 
} 
.sub>li { 
    width: 100px; 
} 
.multi.sub>li { 
    display: inline-block; 
} 
#nav>li:hover .sub { 
    display: block; 
} 

Answer 2

在等待一個更好的答案，哈克的解決辦法是要做到這一點：

#nav>li:hover .sub { 
    display: block; 
    width:1000%; 
} 

http://jsfiddle.net/YXT7j/39/