Wie kann ein responsiv ausklappendes DD-Menü, das in einer Gridzelle ist, den Content der Gridzellen darunter überlappen?

[Rolf B]

Hallo Matinee,

zunächst einmal: Du kannst Dir Schreibarbeit sparen, wenn Du Sammeleigenschaften verwendest.

Statt

    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 

geht auch einfach

    border-radius: 6px; 

Falls die Radien pro Ecke unterschiedlich sind, gibst Du hinter border-radius einfach alle 4 an, beginnend oben links, im Uhrzeigersinn. Die volle Erklärung ist reichlich komplex, für den Fall hier reicht es so.

Wenn Du margin-top und margin-bottom setzen willst, kannst Du statt dessen "margin-block" verwenden, um den "oberen" und "unteren" Rand, passend zur Schreibrichtung, in einer Eigenschaft zu setzen.

Padding lässt sich schreibrichtungsabhängig mit padding-block und padding-inline setzen, oder "klassisch" mit der padding-Sammeleigenschaft. Dann wird das alles schonmal deutlich kürzer.

Ränder kann man als border: 1px solid green; setzen und dann ggf. nochmal die border-width anpassen.

Die Font-Angaben font-size und font-family kann man als font: size family zusammenfassen, z.B. font: 0.9rem Arial,sans-serif; – was ich deshalb rot gemacht habe, weil man Arial besser Zyrial genannt hätte, damit es dort in der Liste steht, wo es hingehört. Es gibt, gerade für den Bildschirm, deutlich bessere sans-serif Schriften. Bevor Du Arial als Family listest, nimm lieber NUR sans-serif.

Aber grundsätzlich hast Du recht: so ein Menü verlangt eine Menge an CSS.

Weiterer Hinweis: Paddings und Margins definiert man heute nicht mehr in px, sondern in em oder rem, damit sie sich an die Font-Einstellungen anpassen. Als Faustregel gilt 1em = 16px, aber das ändert sich natürlich, wenn Du die font-size anpasst. Denk nicht in px, denk daran, dass in ein em horizontal ungefähr 2 Zeichen^[1] passen und mach die Abstände entsprechend. Fang mit 0.25em und 0.5em an und wenn Du meinst, das leicht anpassen zu müssen, mach von da aus weiter.

aber keine zutreffende Einschätzung darüber, welche Stylings tatsächlich beim ul wirksam waren und was nur so aussah.

Was Du in den Entwicklerwerkzeugen in allen Details überprüfen kannst. Einmal die geltenden CSS Regeln und welche Eigenschaften darin verwendet werden und welche nicht, und zum anderen die Liste der tatsächlichen Eigenschaftswerte.

Beispielsweise im Self-Wiki kannst Du für jede Eigenschaft nachschauen, ob sie vererbt wird oder nicht.

Rolf

---

1. Ganz grob. Es hängt natürlich auch hier am verwendeten Font, ob das passt. ↩︎