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.