html – CSS accordion menu opening more submenus within a submenu

Question:

I know that to build an accordion-style menu it's like this:

<html>
    <head>
        <style>
            .menu-sanfona li ul{
                display:none;
            }
            .menu-sanfona li:focus ul{
                display:block;
            }
        </style>
    </head>

    <body>
        <ul class="menu-sanfona">
            <li tabindex="0">Item 1
                <ul>
                    <li>Item 1.1</li>
                    <li>Item 1.2</li>
                </ul>
            </li>
            <li tabindex="1">Item 2
                <ul>
                    <li>Item 2.1</li>
                    <li>Item 2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

What I would like to know is how to build a type of accordion menu that opens more menus within the open menus, for example

Let's say I clicked on "Item 1" and opened a submenu called "Item 1.1". OK!

Then when I click on "Item 1.1" it shows another submenu with "Item 1.1.1", "Item 1.1.2", "Item 1.1.3" … How would this code be using only HTML and CSS ??

Answer:

The solution I found is as follows:

<ol class="menu-sanfona">
	<li>
    	<label for="Item-1">Item-1</label>
    	<input type="checkbox"  id="Item-1" />
   		<ol>
      		<li>
       			<label for="Item-1-1">Item-1-1</label>
        		<input type="checkbox" id="Item-1-1" />
        		<ol>
         			<li>
           				<label for="Item-1-1-1">Item-1-1-1</label>
           				<input type="checkbox" id="Item-1-1-1" />
           				<ol>
              				<li>
                				<label for="Item-1-1-1-1">Item-1-1-1-1</label>
               					<input type="checkbox" id="Item-1-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
	<li>
    	<label for="Item-2">Item-2</label>
    	<input type="checkbox"  id="Item-2" />
   		<ol>
      		<li>
       			<label for="Item-2-1">Item-2-1</label>
        		<input type="checkbox" id="Item-2-1" />
        		<ol>
         			<li>
           				<label for="Item-2-1-1">Item-2-1-1</label>
           				<input type="checkbox" id="menu-2-1-1" />
           				<ol>
              				<li>
                				<label for="Item-2-1-1-1">Item-2-1-1-1</label>
               					<input type="checkbox" id="Item-2-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
</ol>
<style>
ol.menu-sanfona{padding-left:30px; list-style:none;}
li{position:relative;}
li label{padding-left:37px;cursor:pointer;display:block;}
li input{position:absolute;left:-0.5em;top:0;opacity:0;cursor:pointer;}
li input + ol{height:33px;margin:-16px 0 0 -51px;}
li input + ol > li{display:none;}
li input:checked + ol{height:auto;margin:-23px 0 0 -51px;padding:33px 0 0 77px;}
li input:checked + ol > li{display:block;}
</style>
Scroll to Top