打破了鋰元素在一個下拉導航

Question

我有一個小問題，我的基於CSS的下拉菜單導航

這裏是表示其當前狀態的小小提琴：
http://jsfiddle.net/VXafN/
滑出應純粹基於CSS的像小提琴

#main-nav > ul > li:hover > ul { 
    display: block; 
} 

的問題是這樣的事實，即每個SU的父<李>元（紅色邊框） b-<ul>（黃色邊框）延伸至子導航的完整大小。
在我的演示中，您可以看到我沒有在頂級<li>元素上放置任何固定寬度，我不希望它們具有固定寬度。 如果子導航的內容太大，它們太大。

我試圖才達到是這樣的：
http://jsfiddle.net/6XERQ/ （只加固定寬度）
但沒有對<李>元素在最好的情況下固定寬度，的UL應打破父親<李>元素，只是採取自動寬度（黃色邊框）

我可以使用JavaScript和/或操縱後來的DOM，但我打賭有一個更乾淨，基於CSS的解決方案。在這種情況下，我不想使用任何黑客或不乾淨的標記。

的兒童爲<UL>應該有全寬下一代的需要，但父母與<李>還是應該調整隻是它使用

鏈接文本有什麼，非哈克如何實現這一目標？
我會保持這個更新並提供所需相應

感謝任何可能的信息，提前爲您的幫助和啓發

Answer 1

http://jsfiddle.net/6XERQ/2/

使用position:absolute你的子菜單的。

使用這種活現場的一個例子：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate

CSS：

#main-nav > ul > li { 
    position: relative; 
    padding: 5px; 
    float: left; 
    border: 1px dashed red; 
    white-space: nowrap; 
    width: 120px; 
} 

#main-nav > ul > li:hover > ul { 
    display: block; 
    position: absolute; 
    top: 30px; 
    left: 0; 
}