在下拉导航中突破 li-Element

Question

我的基于 CSS 的下拉导航有一个小问题

这是一个代表其当前状态的小小提琴：
http://jsfiddle.net/VXafN/
滑出应该完全基于 CSS，就像在小提琴中一样

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

问题在于，每个子

（黄色边框）的父
• 元素（红色边框）会延伸到子导航的完整大小。
  在我的演示中，您可以看到我没有在顶级
• 元素上放置任何固定宽度，我不希望它们具有固定宽度。 如果子导航的内容太大，它们太大了。

  我想要实现的是这样的：
  http://jsfiddle.net/6XERQ/ （只是添加了固定宽度）
  但是在

• 元素上没有固定宽度
，在最好的情况下，ul 应该脱离父元素-
• 元素
并且只采用自动宽度（黄色边框）

之后我可以使用 JavaScript 和/或操作 DOM，但我敢打赌有一个更干净、基于 CSS 的解决方案。在这种情况下，我不想使用任何黑客或不干净的标记。

child-

应具有其子级所需的完整宽度，但 parent-
• 仍应仅根据其使用的链接文本进行调整

是否有任何非 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;
}