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

Question

这是我的代码的简化版本：

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

所以在我的例子中，“Short”子菜单很好，但“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/5pD​​tY/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 中（！）。

编辑 2：在 CSS hack 的帮助下（如本页所示），我设法让代码在 Chrome、FF 和 IE 中运行。包含 CSS 声明@-moz-document url-prefix() {...}会导致该声明仅被 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; }
}

另请参阅此 (*UPDATED*)简短演示。