在下拉菜單中突破li-Element

Question

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

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

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

問題在於，每個子<ul>的父<li>元素（紅色邊框）（黃色邊框）會延伸到子導航的整個大小。
在演示中，您可以看到我沒有在頂層<li>元素上放置任何固定寬度，我不希望它們具有固定寬度。 如果子導航的內容太大，則它們太大。

我要達到的目標是這樣的：
http://jsfiddle.net/6XERQ/ （只需添加固定寬度）
但<li>元素上沒有固定的寬度，並且在最佳情況下， ul應該突破parent- <li>元素，並采用自動寬度（黃色邊框）

之后，我可以使用JavaScript和/或操作DOM，但我敢肯定有一個更干凈的基於CSS的解決方案。 在這種情況下，我不想使用任何駭客或不潔的標記。

child- <ul>應該具有其子級所需的完整寬度，但是parent- <li>仍應僅調整為其使用的鏈接文本

有沒有非hacky的方式來實現這一目標？
我將對此進行更新，並提供相應的任何可能的信息

預先感謝您的幫助和啟發

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;
}