Dropdown-Menu zur Sprachenerweiterung

[Rolf B]

Hallo Gustav,

ich war wohl geistig abwesend.

Was du mit dem blauen Ereignisrahmen meinst, weiß ich nicht genau. Ich sehe nichts blaues. Nur graue Hinterlegung bei den Menüpunkten, und einen dünnen gestrichelten Rahmen um das Summary-Element, der zu sehen ist wenn es den Fokus hat. Um die <a> Elemente ist bei mir bei Fokus ein kräftiger schwarzer Rahmen zu sehen. Das ist ein "outline", es wird vom Browser vorgegeben. Da Du den Fokus durch einen grauen Hintergrund darstellst, könntest Du den Outline mit outline:none auf den Links und dem <summary> entfernen.

Die Justierung des Popup-Div ist für Schmal- und Breitmodus verschieden. Im "Normalmodus" (Schmal) nimmst Du right:50% und transform:translate(50%, 0). Im Breitmodus ist es right:0 und transform:none, dadurch ist das Popup im Breitmodus rechtsbündig.

Was gar nicht passt, ist das flex-grow:2; beim Sprachenmenü. Es macht das Menüelement viel zu breit. Es sollte, wie das Menu-Item für "Home", ein flex-grow:0 haben. Und eine genügend große Flex-Basis (Parameter 3 der Flex-Eigenschaft), damit zwischen Pfeil und Kugel nicht umgebrochen wird. Das hat Auswirkung auf die Breite des Popup-div, aber das gleichst Du mit width:12em; für dieses div (nur im Breitmodus) wieder aus.

Das vertikale Padding geht schief weil Du Pixel als px angeben musst. padding: 4 0.5em; ist falsch und wird ignoriert.padding: 4px 0.5em; wäre besser. Aber 0.25em statt 4px wäre noch besser.

Pfeil und Kugel sind auch schlecht ausgerichtet. Das liegt daran, dass das Image keine anständige Baseline hat und deshalb am oberen Rand der Box klebt. Schiebe es nach unten, mit vertical-align: bottom;. Und nimm die width/height Angaben aus dem HTML heraus. Da sind nur Pixel erlaubt, im CSS kannst Du die Größe in em ausdrücken. Z.B. mit height: 1.25em;, das sieht bei mir ganz gut aus. Wenn das <summary> Element dann auch ein vertikales Padding von 0.5em bekommt, so wie die <a> Elemente, passt auch die Höhe.

Dass die Rahmen um die Menüpunkte aneinanderkleben war Absicht? War da nicht mal eine Lücke (margin)?

Rolf