在下拉菜单中约束LI的宽度子UL

Question

我想以最简单的形式将CSS中下拉菜单中<ul>标记的宽度限制为<li>的父<ul>的宽度，并且不设置任何固定的。

我做了很多搜索和测试，没有实现或理解它。确切地说，我想了解它的工作原理。

可能使这件事发生的财产是什么？

我已经找到了最简单的jsfiddle http://jsfiddle.net/zAXRK/2/我可以想出是否有人可以解释为什么它可能，以及如何？

我尝试这个例子，当你使用光标覆盖第一个项目时=出现子菜单，包含它的<li>变大，推动其他元素。

我想要做的是将子菜单放在其父元素的宽度内，无论宽度如何，并且不修复它。 （如果没有解决方案，我会用JS做，但我更希望在CSS中清理它，我认为这是一个很好的练习。）

感谢任何愿意帮助我理解CSS规则的人。如果答案在外面某处，我要么找不到，要么我不理解，请原谅。

Answer 1

您需要在position和li上设置一些.submenu属性，这样您就可以设置width: 100%（它不是固定的宽度，我希望它不是问题）：

以下是更改：

.menu > li {
    position: relative;
} 

.sub-menu {
    position: absolute;
    width: 100%;
}

工作jsFiddle。