Vysúvacie menu po onfocusout/onblur úplne nezmizne

Zdravím a ospravedlňujem sa za nepríliš výstižný názov témy,

pomocou CSS a JS som vytvoril vyskakujúce menu (pre menšie obrazovky).

Živá ukázka

Problém mám so skrytím menu. Ak kliknem mimo menu, všetko funguje ako má (menu sa skryje a nezobrazuje sa, až kým znovu nekliknem na tlačidlo). Ak však zatvorím menu pomocou tlačidla a potom kliknem na Normálny text, menu opätovne vyskočí.

Nechápem, prečo k tomuto správaniu dochádza. Pokúšal som sa ho odstrániť aj pomocou focus(), to však viedlo k znefunkčneniu celého menu. Takisto som skúšal vymeniť onfocusout za onblur, ale popísané nežiaduce správanie pretrváva.

Poteší ma každé nasmerovanie. Ak sa zaobíde bez frameworkov (jQuery a pod.), tak ma poteší dvakrát.

RastyAmateur:
„Spíš bych se ale zamyslel nad tím, jestli to menu opravdu chceš zobrazovat při nějakém kliku a skrývat při kliknutí mimo...“

V princípe chcem, pretože sa to takto bude správať iba na malých rozlíšeniach. Ide o akúsi alternatívu k hamburger menu. Ukážku som však kvôli lepšej názornosti upravil.