Question

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

这是一个代表其当前状态的小提琴：
http://jsfiddle.net/VXafN/
幻灯片应该是纯粹基于CSS的，就像小提琴一样

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

问题在于，父母＆lt; li＆gt;每个子的元素（红色边界）＆lt; ul＆gt; （黄色边框）延伸到子导航的完整大小在我的演示中，您可以看到我没有在顶级＆lt; li＆gt;上放置任何固定宽度。元素，我不希望它们有固定的宽度。 如果子导航内容太大，则太大了。

我想要实现的是这样的：
http://jsfiddle.net/6XERQ/ （刚添加固定宽度）
但没有固定宽度的＆lt; li＆gt;元素，在最好的情况下， ul应该突破parent-＆lt; li＆gt;元素，只需采用自动宽度（黄色边框）

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

孩子 - ＆lt; ul＆gt;应该有孩子所需的全宽，但是父母 - ＆lt; li＆gt;仍然应该只调整它使用的链接文本

是否有任何非黑客的方式来实现这一目标？我将保持更新并提供相应的所需信息

提前感谢您的帮助和灵感

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

在下拉导航中中断li-Element

1 个答案: