Question

以下是我code的简化版：

我想要的是菜单的子项至少是它们的父宽度，但可以更长。

所以在我的例子中，“短”子菜单很好，但“LongerParentThere”不是。

我需要为表格单元格自动填充保留此代码（除非还有其他方法）：

#container {
    width: 350px;
}

#container > ul {
    width: 100%;
    display: table;
}

#container > ul > li {
    display: table-cell;
    text-align: center;
}

菜单不会有其他子级别。

有没有办法在没有JavaScript的情况下执行此操作？

Answer 1

使第一级li元素相对定位。然后，您可以使用子菜单ul和li width: 100%

http://jsfiddle.net/5pDtY/6/

Answer 2

您可以（几乎）通过将这些行添加到现有CSS来实现您想要的效果：

适用于Chrome和IE，不 FF （继续阅读“通用解决方案”。）

#container > ul > li { position: relative; }
#container > ul > li > ul { min-width: 100%; }
#container > ul > li > ul > li { white-space: nowrap; }

编辑1 ：
我还发现添加#container > ul > li:hover { display: list-item; }会使其在FireFox和IE中起作用（至少> = 9），但Chrome中的 NOT （！）。

编辑2 ：借助CSS hack（在 this pages 上找到），我设法让代码在Chrome，FF和IE中运行。在@-moz-document url-prefix() {...}中包含CSS声明会导致该声明仅由FF理解（并应用）。

“通用”解决方案。（适用于Chrome，FF和IE。）

#container > ul > li { position: relative; }
#container > ul > li > ul { min-width: 100%; }
#container > ul > li > ul > li { white-space: nowrap; }
@-moz-document url-prefix() { 
#container > ul > li:hover { display: list-item; }
}

另请参阅此（*更新*） short demo 。

CSS：如何使下拉子项至少填充父宽度

2 个答案: