Hallo Gerrit,
Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.
Aber Du hättest recherchieren können, was die Dir unbekannten Elemente <details> und <summary> tun 😉. Ein vollständiges Menü mit details/summary hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, also nicht das, was Du willst. Aber vielleicht kannst Du dort ein paar Ideen abgucken.
Für eine reine CSS Lösung ist details/summary aber eigentlich der beste Ansatz, andere Lösungen wie :hover oder Checkbox-Hack leiden an fehlender Bedienbarkeit (was meint: Bedienbarkeit für jeden, ob Maus, Touch, Tastatur, Screenreader oder Braille-Zeile). Du hängst da allerdings die kleine Schar derjeniger ab, die noch zur Nutzung des Internet Explorers gezwungen sind. Die bekommst Du nur mit einer Javascript-Lösung richtig unterstützt.
Rolf
sumpsi - posui - obstruxi