html - Make all elements of <ul> element visibile -

in <ul>, first descendent <ul> element not shown if has descendent <ul> element itself.

i.e.

"level ii" elements visible if there no "level iii" elements.

i'd elements in child <ul> show of <li> elements within it, unordered list rendered without 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>

the problem nav ul li > ul selector. selecting ul direct descendant of li anywhere in ul anywhere inside nav. applies both ul children in markup. both ul children fixed in same position; level iii ul covering level ii ul.

the best way fix start giving elements class names, can target in css:

jsfiddle

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;  }

<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>