Eu sei que pra montar um menu do tipo sanfona é assim:
<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>
O que eu gostaria de saber é como fazer pra montar um tipo de menu sanfona que abre mais menus dentro dos menus abertos por exemplo
Digamos que eu cliquei no "Item 1" e abriu um submenu chamado "Item 1.1". ok!
Aí quando eu clicar no "Item 1.1" ele mostre outro submenu com "Item 1.1.1", "Item 1.1.2", "Item 1.1.3" ... Como seria esse código utilizando apenas HTML e CSS ??