CSS Focus Dropdown-Menü verschwindet beim Klicken auf Kindli

Question

Ich habe Probleme mit meinem Dropdown-Menü. Wenn ich versuche, auf einen der Links im Untermenü zu klicken, geht der Fokus vom Elternteil verloren und das Menü verschwindet, so dass es unmöglich ist, den Links im Untermenü zu folgen. Ich habe dieses Forum und Google gesucht und obwohl es viele ähnliche Probleme gibt, kann ich keine Lösungen für mein spezielles Problem finden. Ich wäre sehr dankbar für jede Hilfe zu diesem Thema. Die Seite ist und das Untermenü befindet sich unter der Schaltfläche "Kategorien".

Answer 1

Verwenden Sie nicht Fokus. Es gibt andere Möglichkeiten, zum Beispiel könnten Sie: target oder: hover verwenden, um das Untermenü zu öffnen. Wenn Sie target verwenden, müssen Sie dem Untermenü eine ID hinzufügen. Ziel:

.sub-menu{display:none;} 
#categories:target{display:block} 

Ein anderer Weg ist Javascript zu verwenden.

Answer 2

Ich habe eine ziemlich einfache Lösung dafür ausgearbeitet, indem ich einige CSS zum Hover-Status des Untermenüs hinzugefügt habe. Im Versteck/zeigt das Untermenü der max-height Eigenschaft verwendet und fixiert das Problem durch Schreiben:

.sub-Menü: Hover { max-height: 100% }

so einfach! Wenn sich die Maus über einem Untermenüpunkt befindet, muss das Menü sichtbar bleiben, damit genug Zeit bleibt, um auf die beigefügten Links zu klicken. Nicht sicher, ob dies der "richtige" Weg ist, um das Problem zu beheben, aber es funktioniert wie ein Zauber. Danke für Ihre Beiträge.