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.

Answer 1

[NackterGerd]

Dann hast du wohl Default Werte nicht gesetzt.

Diese können bei jedem Browser natürlich verschieden belegt sein.

Schau die Seite im Firefox Developermode an und anschaue welche Werte von Default kommen und welche für deine Anwendung falsch vorgelegt sind und setzte sie entsprechend

Comments

[Babelfish]

Welche Default-Werte meinst du denn? Ob ein Element den Focus hat oder nicht hat nichts mit Default-Werten zu tun.

Die Lösung liegt aber in der Pseudoklasse :focus-within, wie ich in einer Antwort gerade geschrieben habe.

Answer 2

[Babelfish]

Da Gutefrage meine eigene Bearbeitung mit der Lösung abgelegt hat – warum auch immer – muss ich sie als eigene Antwort schreiben:

Die Lösung ist, statt der Pseudoklasse :focus die Klasse :focus-within zu nutzen. Damit verliert das Menu selbst nicht der Focus und es funktioniert auch in Firefox.

CSS

.menu:focus-within {
 background-color: coral;
}

…

.menu:focus-within ul {
 position: absolute;
 display: block;
}

Gerne hätte ich das in der Frage ergänzt aber Gutefrage will das nicht.

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.