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>