Smooth transition checkbox menu, without using "visibility:;" or "display:None;"

Question

I have a small menu here, which has the use of overflow:Hidden; /max-height:; and height:; to make a smooth transition by clicking on the checkbox and displaying the subs-menus, however I am not able to smoothly display the class 'SUB 2' by clicking on it and displaying the 'links 3' so that they go back smoothly with Transition:; I’ve already used 'display:None;' but it doesn’t go back smoothly, I’ve already used 'visibility:;' but it does not track the ascent of other objects if it is added after links 3, because I am not able to go back the links 3 of 'SUB 2' when clicking the checkbox, would it be possible to do it behaves like the others above?? the 'menu' and 'SUB 1' that go back gently and relative to the other objects by clicking on the 'checkbox'? I don’t know how to make 'SUB 2' behave like the class 'menu' and 'SUB' that worked!

input{ display:;}

.menu{ width:200px;}

.rd1:checked ~ ul{ max-height:300px; height:auto; transition:all 0.4s linear;}
.rd2:checked ~ ul ul{max-height:300px; height:auto; transition:all 0.4s linear;}
.rd3:checked ~ ul ul ul{max-height:300px; height:auto;  transition:all 4s linear;}
 
.menu ul{overflow: hidden; max-height:0px;transition:all 0.4s linear; }

label#lb1{ background-color:#09F; position:relative; padding:5px; display:block;}

.menu ul li{ padding:3px; }

.menu ul li a{ background-color:#FFC488; padding:5px; display:block;}

<nav class="menu">
<input type="checkbox" class="rd1" id="t1" checked/>
<input type="checkbox" class="rd2" id="t2" checked/>
<input type="checkbox" class="rd3" id="t3" checked/>

<label for="t1" id="lb1">MENU</label>
<ul>
  <li><a href="#">LINKS</a></li>
  <li><a href="#">LINKS</a></li>
  <li><label id="lb1" for="t2">SUB</label></li>
      <ul>
         <li><a href="#">LINKS 2</a></li>
         <li><a href="#">LINKS 2</a></li>
     
  <li><label for="t3" id="lb1">SUB 2</label></li>
       <ul>
         <li><a href="#">LINKS 3</a></li>
         <li><a href="#">LINKS 3</a></li>
       </ul>
  </ul>
   
</ul>
</nav>

Answer 1

The option I found is to invert the order of inputs in HTML to get it right. Because the 3 level would only make sense to be open if the 2 is already open.

To better understand see the example as it turned out.

OBS: note that now the order of inputs checkbox is inverted in html, if you want it has as with CSS back to order, but as you should give display:none they won’t even need...

input{ display: inline-block;}

.menu{ width:200px;}

label#lb1{ background-color:#09F; position:relative; padding:5px; display:block;}

.menu ul li{ padding:3px; }

.menu ul li a{ background-color:#FFC488; padding:5px; display:block;}

.menu ul, .menu ul ul, .menu ul ul ul {
    overflow: hidden; 
    height:0px;
    transition:all 0.4s linear; 
}

#t1:checked ~ ul {
    height: 300px;
}
#t2:checked + #t1:checked ~ ul ul {
    height: 100px;
}
#t3:checked + #t2:checked  ~ ul ul{
    height: 170px;
}

<nav class="menu">
    <input type="checkbox" class="rd3" id="t3" />3
    <input type="checkbox" class="rd2" id="t2" />2
    <input type="checkbox" class="rd1" id="t1" />1

    <label for="t1" id="lb1">MENU</label>
    <ul>
    <li><a href="#">LINKS</a></li>
    <li><a href="#">LINKS</a></li>

    <li><label id="lb1" for="t2">SUB</label></li>
        <ul>
            <li><a href="#">LINKS 2</a></li>
            <li><a href="#">LINKS 2</a></li>
        
            <li><label for="t3" id="lb1">SUB 2</label></li>
            <ul>
                <li><a href="#">LINKS 3</a></li>
                <li><a href="#">LINKS 3</a></li>
            </ul>
    </ul>
    </ul>
</nav>