html - 选择嵌套列表

Question

我有一个导航栏，其中包含一个嵌套了 3 次的菜单。所以我有一个带有 id="navbar" 的 div，它包含一个 ul，它有一个带有 id="的 li 元素menu"，其中包含另一个 ul，后者包含更多 li 项。现在我想分别针对每个 ul，向其添加一些 JS 代码，使第一层连续显示等等。到目前为止，我只设法针对第一层和第三层，但无法更改第二层的属性。 #navbar ul li 以某种方式转到第一个，但 #navbar ul li ul li 以第三个为目标。我做错了什么？

HTML:

<div id="navbar">
    <ul>
        <li><a href="#">IJS</a></li>
        <li class="ion-navicon-round" id="menu"></li>
            <ul>
                <li><a href="#">knjižnica</a></li>
                <li><a href="#">zaloga</a>
                    <ul>
                        <li><a href="#">novi izvodi tiskanih revij</a></li>
                        <li><a href="#">elektronske revije</a></li>
                        <li><a href="#">katalog</a></li>
                        <li><a href="#">baze podatkov</a></li>
                    </ul>
                </li>
                <li><a href="#">storitve</a>
                    <ul>        
                        <li><a href="#">medknjižnična izposoja</a></li>
                        <li><a href="#">fotokopirnica</a></li>              
                    </ul>
                </li>
            </ul>
        <li><a href="#">ENG</a></li>
    </ul>   
</div>

CSS:

#navbar {
    background-color: #913D88;
    color: #fff;
    font-size: 1.5em;
}

#navbar ul li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navbar ul li a:link, #navbar ul li a:visited {
    color: #fff;
    text-decoration: none;
}

#navbar ul li ul li {
    display: none;
}

Answer 1

小错误。你的第二层 ul 在 li 元素之外而不是在里面。

问题出在下面的代码中。

  <li class="ion-navicon-round" id="menu"></li>
                    <ul>
                        <li><a href="#">knjižnica</a></li>
                        <li><a href="#">zaloga</a>
                            <ul>
                                <li><a href="#">novi izvodi tiskanih revij</a></li>
                                <li><a href="#">elektronske revije</a></li>
                                <li><a href="#">katalog</a></li>
                                <li><a href="#">baze podatkov</a></li>
                            </ul>
                        </li>
                        <li><a href="#">storitve</a>
                            <ul>        
                                <li><a href="#">medknjižnična izposoja</a>   </li>
                                <li><a href="#">fotokopirnica</a></li>              
                            </ul>
                        </li>
                    </ul>

应该是这样的

  <li class="ion-navicon-round" id="menu">
                    <ul>
                        <li><a href="#">knjižnica</a></li>
                        <li><a href="#">zaloga</a>
                            <ul>
                                <li><a href="#">novi izvodi tiskanih revij</a></li>
                                <li><a href="#">elektronske revije</a></li>
                                <li><a href="#">katalog</a></li>
                                <li><a href="#">baze podatkov</a></li>
                            </ul>
                        </li>
                        <li><a href="#">storitve</a>
                            <ul>        
                                <li><a href="#">medknjižnična izposoja</a></li>
                                <li><a href="#">fotokopirnica</a></li>              
                            </ul>
                        </li>
                    </ul>
     </li>

DEMO