css - 为什么顶部 li 的百分比宽度会折叠子 li 的宽度？

Question

我不明白为什么如果我将菜单中顶部的 li 从 px 更改为百分比，子菜单项将停止正常显示并相互重叠。

JS fiddle 工作: http://jsfiddle.net/mg6vx/

JSfiddle 不工作(添加宽度:20%；到#nav li): http://jsfiddle.net/4eyp5/

HTML:

<div id="nav">
<ul>
<li><a href="#" title="About Us">About Us</a>
<ul>
<li><a href="#" title="stuff">Ab</a></li>
<li><a href="#" title="stuff">out</a></li>
<li><a href="#" title="stuff">Us</a></li>
</ul>
</li>
<li><a href="#" title="stuff">Stuff</a>
<ul>
<li><a href="#" title="stuff">Stuffed</a></li>
<li><a href="#" title="stuff">stuffs</a></li>
<li><a href="#" title="stuff">Stuffeds</a></li>
</ul>
</li>
<li><a href="#" title="Some Such">Some Such</a>
<ul>
<li><a href="#" title="stuff">Doohickey</a></li>
<li><a href="#" title="stuff">Widgets</a></li>
<li><a href="#" title="stuff">Things that amazon sells for one star</a></li>
</ul>
</li>
<li><a href="#" title="Careers">Careers</a>
<ul>
<li><a href="#" title="stuff">Interal postings</a></li>
<li><a href="#" title="stuff">External postings</a></li>
<li><a href="#" title="stuff">Theoretical postings</a></li>
</ul>
</li>
</ul>
</div>

CSS:

#nav * {
    margin: 0;
    padding: 0;
    }

#nav li {
    position:relative;
    float:left;
    list-style:none;
    background-color:black;
    /* if you add this the child li's fall over themselves width:20%; */
    }

#nav li a {
    width:100px;
    height:30px;
    display:block;
    text-decoration: none;
    text-align:center;
    line-height:25px;
    color: white;
    }

#nav li a:hover {
    background-color: #009;
    text-decoration: underline;
    }

#nav ul ul {
    position: absolute;
    top: 30px;
    visibility: hidden;
    }

#nav ul li:hover ul {
    visibility:visible;
    }

Answer 1

正如@fizzix 指出的那样，每个 li 的宽度都是父元素的 20%。因此，嵌套的 li 元素具有较小的宽度，因为它们是 20% 的 20%.. 等等

你应该使用 child combinator, > , 为了防止样式影响嵌套的 li 元素。

像这样的东西会起作用:(example)

#nav > ul > li {
    width:20%;
}
#nav > ul > li > ul,
#nav > ul > li > ul > li,
#nav ul li a {
    width:100%;
}