Now that all the major browsers support the style :has(), it is possible to produce a tree menu using minimal styles and produces a menu that is probably better than those produced using javascript/jQuery.

This menu has all the list items as links, with the controls for each level using the hamburger icon to open the level and the 'X' icon to close that branch.

Each level takes the form of:

<li><a href="#url">Link-2.2.4</a> <span><label><input type="radio" id="lk2.2.4" name="menu">☰</label><label for="lk2.2">✕</label></span>
  <div class="sub">
	<ul>
	  <li><a href="#url">Link-2.2.4.1</a></li>
	  <li><a href="#url">Link-2.2.4.2</a></li>
	  <li><a href="#url">Link-2.2.4.3</a></li>
	</ul>
  </div>
</li>

The first label opens the following <div class="sub"> and the second label opens the previous <div class="sub"> which closes all other open branches in the tree.

All this is done using just one line of CSS:

#menu li:has(:checked) > .sub {grid-template-rows:1fr; transition:grid-template-rows 0.5s;}

So, finally, a simple TREE-MENDOUS CSS menu.