Nav-Dropdown: Panel-Padding wirkt jetzt + gleichmäßiger Innenabstand
Das Submenu-Padding wurde stillschweigend vom globalen reset.css-Selektor
`ul[class] { padding: 0 }` (Spezifität 0,1,1) überschrieben, da
`.site-nav__submenu` nur (0,1,0) hat — die Hover-/Active-Pillen klebten
dadurch links/rechts am Panel-Rand. Selektoren auf
`.site-nav__list .site-nav__submenu` (0,2,0) gehoben (Haupt-Regel,
@supports-Glas, Mobile-Override), sodass das Padding ohne !important greift.
Innenabstand auf gleichmäßige 0.55rem rundum gesetzt — Pillen stehen
oben/unten/seitlich gleich dezent frei.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -152,7 +152,9 @@
|
|||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__submenu {
|
/* Höhere Spezifität (0,2,0) nötig, damit das Panel-Padding den globalen
|
||||||
|
reset.css-Selektor `ul[class] { padding: 0 }` (0,1,1) schlägt. */
|
||||||
|
.site-nav__list .site-nav__submenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% + 0.4rem);
|
top: calc(100% + 0.4rem);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -163,8 +165,8 @@
|
|||||||
gap: 0.2rem;
|
gap: 0.2rem;
|
||||||
min-width: 15rem;
|
min-width: 15rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* Mehr Luft links/rechts, damit die abgerundeten Hover-Pillen klar rauskommen. */
|
/* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
|
||||||
padding: 0.55rem 0.85rem;
|
padding: 0.55rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
/* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
|
/* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
|
||||||
background: rgb(20 20 20 / 0.96);
|
background: rgb(20 20 20 / 0.96);
|
||||||
@@ -179,7 +181,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@supports (backdrop-filter: blur(1px)) {
|
@supports (backdrop-filter: blur(1px)) {
|
||||||
.site-nav__submenu {
|
.site-nav__list .site-nav__submenu {
|
||||||
background: rgb(20 20 20 / 0.82);
|
background: rgb(20 20 20 / 0.82);
|
||||||
backdrop-filter: blur(14px) saturate(1.4);
|
backdrop-filter: blur(14px) saturate(1.4);
|
||||||
}
|
}
|
||||||
@@ -342,8 +344,9 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert. */
|
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert.
|
||||||
.site-nav__submenu {
|
Spezifität (0,2,0) gleich der Desktop-Regel; gewinnt hier per Quell-Reihenfolge. */
|
||||||
|
.site-nav__list .site-nav__submenu {
|
||||||
position: static;
|
position: static;
|
||||||
transform: none;
|
transform: none;
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user