Gibt es eine Möglichkeit, das erweiterte <details>-Element horizontal mit seinem übergeordneten <summary>-Element zu zen ⇐ HTML

[Guest]

Ich versuche, ein -Element zu verwenden, um meiner Navigationsleiste ein Dropdown-Menü hinzuzufügen, da dies eine wirklich schöne und saubere Möglichkeit ist, ohne auf JavaScript zurückzugreifen.
Alles funktioniert wie vorgesehen, aber ich möchte die Dropdown-Optionen so gestalten, dass sie einen kleinen Rahmen (und damit einen Abstand) haben, da der Text sonst über dem Inhalt meiner Website schwebt und dadurch nicht sichtbar wäre . Dabei stoße ich jedoch auf das Problem, dass das erweiterte -Element immer linksbündig mit seinem übergeordneten -Element verbleibt, was bedeutet, dass die Dropdown-Elemente nur nach rechts erweitert werden und nicht Sieht nicht besonders gut aus.
Hier ist ein Minimalbeispiel:

Code: Select all

.nav-item {
padding: 10px;
}

.navbar-nav {
display: flex;
}

.navbar-nav a {
text-decoration: none;
}

.navbar-nav a:hover {
color: #94add7;
}

.dropdownText:hover {
color: #94add7;
}

.dropdownItem {
/* display: none; */
/* width: 100px; */
position: absolute;
margin-top: 10px;
padding: 15px;
border: 1px solid black;
}

.dropdownText {
cursor: pointer;
}

.dropdownToggle details>summary {
list-style: none;
}

.dropdownToggle details>summary::-webkit-details-marker {
display: none;
}

Code: Select all

[url={targetUrl}]Dropdown Item with longer name[/url]

Gibt es eine Möglichkeit, die -Elemente zu erstellen? horizontal zentriert mit dem übergeordneten -Element erweitern, wenn sie unterschiedliche Breiten haben?
Bitte beachten Sie: Ich habe zuvor ein anstelle von Elemente für jedes Navigationsleistenelement, aber nachdem ich viele Dinge ausprobiert hatte, dachte ich über die Möglichkeit nach, dass vielleicht das Der -Ansatz würde es einfacher machen, sie auszurichten ... bisher ohne Erfolg. Das heißt, ich habe keine Präferenz und bin mit beiden Ansätzen einverstanden, solange sie funktionieren.