CSS Problem mit Firefox?
Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.
Hier ein ganz einfacher Testcase:
HTML
<nav>
<span class="menu" tabindex="-1">
Menü aufrufen
<ul>
<li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
<li><a href="https://www.google.com/" target="_blank">Google</a></li>
</ul>
</span>
</nav>
CSS
.menu {
position: relative;
border: 1px solid silver;
border-radius: 5px;
padding: 4px 8px;
}
.menu:focus {
background-color: coral;
}
.menu ul {
display: none;
}
.menu:focus ul {
position: absolute;
display: block;
}
Link
https://jsfiddle.net/Babelfisch/bck65qeo/6/
Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.
HTML,
CSS,
JavaScript,
HTML5,
Webentwicklung,
Frontend
