Verschachtelte Submenüs mit Hilfe von :target ein-/ausblenden

[ebody]

Hallo,

ich versuche hier gerade ein Menü zu basteln, welches nur mit HTML, CSS funktioniert: https://codepen.io/ebody/pen/povbMxm

Nach einem Klick auf einen Menüpunkt, soll das Submenü jeweils solange angezeigt werden, bis man erneut auf den Menüpunkt klickt. Ich bin hier auf eine Möglichkeit gestoßen. Der Zustand "geöffnet/geschlossen" wird mit :target geregelt.

Bei einem Submenü lässt es sich umsetzen, soll dieses Submenü aber ein weiteres Submenü öffnen, funktioniert es nicht. Zumindest ist das gerade der Punkt, wo ich nicht weiter weiß.

Klickt man hier auf "B" und dann auf "B1", schließt sich das ganze Menü. Es soll sich aber das nächste Submenü öffnen.

Ich vermute :target kann es nur einmal auf einer Seite geben und daher lässt es sich nur mit einem Submenü umsetzen, aber nicht mit mehreren oder?

Gruß ebody