"É possível criar esse tipo de funcionalidade apenas com CSS?"
Sim. Você pode conseguir este efeito com CSS usando o atributo HTML tabindex
.
HTML:
<ul class="menu-sanfona">
<li tabindex="0">Item 1
<ul>
<li>Item 1.1</li>
</ul>
</li>
<li tabindex="1">Item 2
<ul>
<li>Item 2.1</li>
</ul>
</li>
</ul>
E o CSS:
.menu-sanfona li ul{
display:none;
}
.menu-sanfona li:focus ul{
display:block;
}
Exemplo mais completo: FIDDLE
O que o código faz é usar o atributo tabindex
para tornar os elementos li
passíveis de foco, e então com CSS é definido que quando o li
estiver com foco, o ul
filho dele fica visível.
Apesar desta solução ser interessante por não usar JavaScript, ela fica um pouco limitada, já que o elemento só fica aberto enquanto está com foco, ou seja, caso você clique em algum input
ou outro item que possua foco, o menu se fecharia.