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

Question

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

我做了很多搜索和测试，但没有实现或理解它。准确地说，我想了解它是如何工作的。

可以使它发生的属性是什么？

我已经解决了最简单的jsfiddle http://jsfiddle.net/zAXRK/2/我想看看是否有人可以解释为什么(如果可能的话)以及如何解释？

我试试这个例子，当你使用光标到第一个元素时 = 子菜单出现并且 <li>谁包含它，就会变得更大，插入其他元素。

我想做的是在其父元素的宽度内制作子菜单，无论宽度如何，并且不固定它。 (如果没有解决方案，我会用 JS 来解决，但我更喜欢用 CSS 来解决它，我认为这是一个很好的练习)。

感谢任何愿意帮助我理解 CSS 规则的人。如果答案在外面的某个地方，要么是我没找到，要么是我没看懂，还请见谅。

Answer 1

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

更改如下:

.menu > li {
    position: relative;
} 

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

和工作jsFiddle .