Question

在<ul>中，如果第一个后代<ul>元素本身具有后代<ul>元素，则不会显示该元素。

即

“Level II”元素仅在没有“Level III”元素时才可见。

我希望子<ul>中的所有元素都显示其中的所有<li>元素，因为无序列表将在没有任何CSS的情况下呈现。

nav {
    background: black;
    position: fixed;
    left: 0;
    top: 0;
    width: 120px;
    height: 100%;
}

nav ul {
    margin: 3rem 0 0 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    padding-top: 4rem;
    margin-bottom: 1rem;
    text-align: center;
}


/** NAV LEVEL II **/

nav ul li > ul {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 0;
    left: 120px;
    background: red;
    display: list;
    margin: 0;
    padding: 3rem 1rem;
}

nav ul li > ul li {
    padding: 0;
    text-align: left;
    background: green;
    display: inline;
}

/** NAV LEVEL III **/

nav ul li > ul li > ul li{

    padding: 0;
    text-align: left;
    background: pink;
    display: block;

}

<nav>
    <ul> <!-- PARENT -->
        <li><a href="#">LEVEL I</a>
          <ul> <!-- FIRST CHILD - LEVEL II -->
            <li>Level II
              <ul> <!-- SECOND CHILD LEVEL III -->
                <li><a href="#">LEVEL III</a></li>
                <li><a href="#">LEVEL III</a></li>
                <li><a href="#">LEVEL III</a></li>
                <li><a href="#">LEVEL III</a></li>
              </ul>
            </li>
            <li>Level II</li>
            <li>Level II</li>
          </ul>
        </li>
        <li><a href="#">LEVEL I</a> </li>
        <li><a href="#">LEVEL I</a></li>           
        <li><a href="#">LEVEL I</a> </li>
       <li><a href="#">LEVEL I</a></li>      
    </ul>
</nav>

Answer 1

问题在于您的nav ul li > ul选择器。它在导航器内的任何地方的任何地方选择任何UL直接后代的UL。这适用于标记中的两个 UL子项。所以两个 UL儿童被固定在同一个位置;您的III级UL涵盖您的II级UL。

解决此问题的最佳方法是开始为您的元素提供类名，您可以在CSS中定位：

JSFiddle

＆＃13;

nav {
    background: black;
    position: fixed;
    left: 0;
    top: 0;
    width: 120px;
    height: 100%;
}
nav ul {
    margin: 3rem 0 0 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    padding-top: 4rem;
    margin-bottom: 1rem;
    text-align: center;
}
/** NAV LEVEL II **/
.secondList {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 0;
    left: 120px;
    background: red;
    display: list;
    margin: 0;
    padding: 3rem 1rem;
}
.secondList li {
    padding: 0;
    text-align: left;
    background: green;
    display: inline;
}
/** NAV LEVEL III **/
.thirdList li {
    padding: 0;
    text-align: left;
    background: pink;
    display: block;
}

＆＃13;

<nav>
    <ul class="firstList"><!-- PARENT -->
        <li><a href="#">LEVEL I</a>
            <ul class="secondList"><!-- FIRST CHILD - LEVEL II -->
                <li>Level II
                    <ul class="thirdList"><!-- SECOND CHILD LEVEL III -->
                        <li><a href="#">LEVEL III</a>
                        </li>
                        <li><a href="#">LEVEL III</a>
                        </li>
                        <li><a href="#">LEVEL III</a>
                        </li>
                        <li><a href="#">LEVEL III</a>
                        </li>
                    </ul>
                </li>
                <li>Level II</li>
                <li>Level II</li>
            </ul>
        </li>
        <li><a href="#">LEVEL I</a> 
        </li>
        <li><a href="#">LEVEL I</a>
        </li>
        <li><a href="#">LEVEL I</a> 
        </li>
        <li><a href="#">LEVEL I</a>
        </li>
    </ul>
</nav>

＆＃13;

Answer 2

这个css将适用于第二个＆amp;第三级ul li结构。所以位置：固定适用于第二和第二第3级。所以这两个级别都是一个在另一个之上。

nav ul li＆gt; UL

所以要么添加一个类并适当地定位它。例如：nav ul li＆gt; ul.second

使<ul>元素的所有元素都可见

2 个答案: