JSFiddle - React, Tailwind, and code Playground

HTML

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

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 **/
.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;
}