html - 未显示嵌套的 UL/LI

Question

<ul id="nav">
    <div id="navspacer" />
    <li class="button" style="width: 109px;"></li>
    <li class="button" style="width: 86px;">
        <img alt="Webdesign" src="images/digifolio_10.jpg"/>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
</ul>
<div id="main">
    content
</div>

li.button 有一个固定的高度：

li.button {
    height:             23px;
    float:              left;
    list-style:         none;
}

div#main的 z-index 为 0

li.button ul的 z-index 为 100：

li.button ul {
    z-index:            100;
    background-color:   #ffffff;
    display:            block;
}

但它只是没有显示在浏览器中...... Firebug 显示它在那里，但它只是没有显示。

Answer 1

请记住，z-index 不适用于没有position-property 的元素，因此它对您的代码没有影响。

并且在 UL 中不允许使用 DIV。请改用边距或填充。

Answer 2

看到你所有的 CSS 会很有帮助。你有溢出：隐藏在某处的 li 上声明吗？

您的 li.button 的高度为 23px，但其中的 ul 会更高。除非您还浮动内部 li 和 img，否则它将比 86px 宽。