1

我的基于 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的方法来实现这一点？
我将保持更新并提供相应的任何可能信息

提前感谢您的帮助和启发

4

1 回答 1

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;
}
于 2013-03-20T16:04:19.510 回答