Aufgeblendete Elemente können nicht ausgewählt werden

[Rolf B]

Hallo Wolf,

es fehlt auf jeden Fall im CSS ein . vor dem mydir in der letzten Regel (mydir ist eine Klasse, kein Element), deswegen greift focus-within nicht.

Dass Du beim hovern nicht ins Menü kommst, liegt daran, dass es eine Lücke zwischen den Boxen von h2 und .mydir gibt. Deswegen endet der :hover von h2, bevor Du in das Popup-Menü kommst.

Es gibt mehrere Lösungen:

• Du verschiebst den :hover auf das nav-Element (und passt das CSS entsprechend an)
• Du verschiebst das Popup in das h2 hinein, so dass der :hover Zustand des h2 nicht verloren geht
• Du beseitigst die Margins um das h2 und fügst den Selektor .mydir:hover zur Liste der Selektoren für den display:flex hinzu. Dann sitzen h2 und .mydir pixelgenau aneinander und der hover geht nahtlos vom einen zum anderen über.

Übrigens solltest Du Dir klar werden, welchen display-Mode Du willst. flex? inline-flex? block? Dein Mischmasch führt aktuell zu den merwürdigen Umformatierungen. Gleichzeitige Angabe von flex und inline-flex auf einem Element hat übrigens die Wirkung, dass der letzte gewinnt; in deinem Fall also inline-flex für die div.mydir Regel.

Rolf