Benötigen Sie Hilfe dabei, eine Schaltfläche mit einem Dropdown-Menü/Inhalt darin zu zentrieren und den Inhalt nach unte ⇐ CSS

[Guest]

Ich versuche, eine anklickbare Schaltfläche mit einem Dropdown-Menü so zu gestalten, dass sie horizontal auf meiner Seite zentriert wird und den Inhalt darunter nach unten verschiebt, wenn meine Webseite in der mobilen Ansicht angezeigt wird. Wenn ich display: flex;, flex-direction: columns; versuche, ist die Schaltfläche „Inhaltsverzeichnis“ zentriert, aber es gibt einen Bereich, in dem sich der Inhalt füllen würde, obwohl sich die Schaltfläche in einem befindet Geschlossener Zustand, ohne dass der Inhalt angezeigt wird. Wenn ich mir die Entwicklungstools ansehe, nimmt das Div, in dem sich die Schaltfläche befindet, den Platz des Inhalts ein, unabhängig davon, ob es geschlossen ist oder nicht. Ich habe nur herausgefunden, dass die Schaltfläche beim Schließen den entsprechenden Platz einnimmt, indem ich ihr eine Position zugebe: absolute;, aber der Inhalt erscheint jetzt über meinem anderen Inhalt, anstatt den Inhalt nach unten zu verschieben. Irgendwelche Hilfe oder Vorschläge?

Code: Select all

.main-article {
align-items: start;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 2fr 1fr;
}

.button-link {
background: none;
border: none;
text-decoration: none;
color: var(--clr-neutral-400);
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
text-align: center;
}

.dropdown.active>.menu-link,
.menu-link:hover {
color: var(--clr-primary-400);
}

.dropdown {
position: relative;
}

.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: var(--clr-neutral-100);
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 5px 0 rgb(0, 0, 0, .1);
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active>.button-link+.dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

@media (max-width: 48rem) {
.main-article {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr;

}
}

@media (max-width: 48rem) {
.dropdown {
display: flex;
flex-direction: column;
}
}

Meine Website mit dem Problem, das ich habe