Is there a way to create persistent 3-level menus in CSS?

Code Help HTML/CSS/JS
1

I found ways to create Persistent single-level menus: Show / hide on click with CSS.

I also found a way to create Temporary three-level menus using list, in codepen.io

Is there a way to create Persistent (toggle-able) three-level menus using CSS ?

Example: menu1 > menu1-1 > menu1-1-1 > link1, link2, link3

I tried adding extra menu levels in HTML, but it broke code:
Replit link

2

You need to structure yout html in a way that is corresponding to the CSS rules to handle the nested tab structures.

For example, in the HTML part:

<nav>
    <div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" />
            <label for="tab-1">List 1 <i>▼</i></label>
            <div class="content">
                <ul>
                    <li><a href="index1.html">try#1</a></li>
                    <li><a href="index2.html">try#2</a></li>
                    <li><a href="index3.html">try#3</a></li>
                    <li><a href="index4.html">try#4</a></li>
                    <li>
                        <div class="tab">
                            <input type="radio" id="tab-1-1" name="tab-group-1" />
                            <label for="tab-1-1">Menu1-1 <i>▼</i></label>
                            <div class="content">
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

And in the CSS part:

/* Nested Tab*/
.tab .tab {
    position: static;
    float: none;
}

.tab .tab label {
    background: linear-gradient(#555, #444);
}

.tab .tab .content {
    position: static;
    opacity: 1;
    background: none;
    color: black;
    padding: 0;
    display: none;
}

.tab .tab [type="radio"]:checked ~ label {
    z-index: 1;
    background: linear-gradient(#333, #222);
}

.tab .tab [type="radio"]:checked ~ .content {
    display: block;
}