html - 无法在 html 中看到嵌套的 ul

Question

我想像这样生成嵌套的无序列表: `

• 列出第一项
• 列出带有子项的第二项:
  • 子元素 1
  • 子元素 2
• 最终列表项

我的 html 代码是:

<nav id="nav">
<ul>
<li>List item one</li>
<li>List item two with subitems:
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
</li>
<li>Final list item</li>
</ul>
</nav>

但我只输出:

• 列出第一项
• 列出带有子项的第二项:
• 最终列表项

不是嵌套的 ul 列表，我的 CSS 是:

#nav
{
}

    #nav > ul > li > ul
    {
        display: none;
    }

    #nav ul
    {
        margin: 0;
    }

    #nav li
    {
        border-top: solid 1px rgba(0,0,0,0.25);
        box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.075);
        padding: 0.5em 0 0.5em 0;
    }

    #nav li:first-child
    {
        border: 0;
        box-shadow: none;
        padding-top: 0;
    }

    #nav li:last-child
    {
        padding-bottom: 0;
    }

    #nav li a
    {
        display: block;
        padding: 0.4em 1em 0.4em 1em;
        text-decoration: none;
        border-radius: 0.4em;
        outline: 0;
        -moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
        -o-transition: background-color .25s ease-in-out, color .25s ease-in-out;
        -ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
        transition: background-color .25s ease-in-out, color .25s ease-in-out;
    }

    #nav li.current_page_item a
    {
        background-color: #272E39 !important;
        background-color: rgba(0,0,0,0.15) !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25);
        font-weight: 700;
        color: #fff;
    }

    #nav li:hover a
    {
        background-color: rgba(200,225,255,0.1);
        color: #fff;
    }

任何人都可以帮我指出我在哪里遗漏了什么。

Answer 1

好吧，你的 CSS 明确告诉你不要显示它:

#nav > ul > li > ul
{
    display: none;
}

所以你的问题是一个特性，而不是一个错误......