Dopóki button
<button class="button_mobile_nav">MENU</button>
ma focus działa reguła
.button_mobile_nav:focus ~ .mobile_nav{
display: flex;
}
i jest widoczne
<div class="mobile_nav">
<a href="/">Strona Główna</a>
<a href="index.php">Pożyczki Chwilówki</a>
<a href="index.php">Pożyczki Ratalne</a>
<a href="index.php">Kredyty Gotówkowe</a>
<a href="/kontakt">Kontakt</a>
</div>
każde kliknięcie poza przyciskiem (czy naciśnięcie klawisza np. TAB) powoduje utratę focus-a przez przycisk i zadziałanie na powrót reguły
.mobile_nav{
display: none;
...
}
Spróbuj dodać np.
.mobile_nav:active{
display: flex;
}
ten wpis powoduje, że w monecie kliknięcia (a dokładnie przyciśnięcia przycisku myszy: keydown) można kliknąć w
<div class="mobile_nav">
<a href="/">Strona Główna</a>
<a href="index.php">Pożyczki Chwilówki</a>
<a href="index.php">Pożyczki Ratalne</a>
<a href="index.php">Kredyty Gotówkowe</a>
<a href="/kontakt">Kontakt</a>
</div>
i po keyup zadziała na powrót
.mobile_nav{
display: none;
...
}
ale w momencie kliknięcia (keydown) zadziała (href)
<a href="/">Strona Główna</a>
<a href="index.php">Pożyczki Chwilówki</a>
itd.
jeżeli wskaźnik myszy znajduję się nad jednym z elementów <a> z
<div class="mobile_nav">