focus-Styling eines Toggle/DD-Buttons bleibt nach geöffnetem Menü (Klick, JS) bestehen

[Matinee]

Hallo,

ich mache gerade das Styling von hover, focus und active für meine beiden Toggle/DD-Menü-Buttons, die ich responsiv im Media Query habe.

Dabei fällt mir auf, dass das focus-Styling, ein violetter Innenrahmen, nicht mehr verschwindet, wenn das Menü mal ausgeklappt ist. Und auch wenn ich durch erneuten Klick auf den Button das Menü wieder schließe, bleibt der Innenrahmen.

Wenn mal geklickt, dann sieht man ihn also dauernd.

Siehe die beiden screenshots.

Wie läst sich das unterbinden oder sollte das "normal" sein? Kann mich nicht erinnern, das bei anderen Beispielen so gesehen zu haben.

Hier ist der Code:

    button.headnav-button:hover, button.sidenav-button:hover {
        box-shadow: 0px 0px 0px 4px #fca497;
    }


    button.headnav-button:focus, button.sidenav-button:focus {
        outline: 4px solid #a00565;
        outline-offset: -9px; 
    }

    button.headnav-button:active, button.sidenav-button:active {
        background-color: #c1ffc1;

    }