Dropdown designen in navbar

[bastian48]

Hi ich möchte meine Navigationsleiste designen: Ich habe ein Dropdown wenn ich auf "Abteilungen" hoovere. Wenn sich das dann öffnet dann kommen zwei Punkte. Wenn ich auf Fußball hovere soll rechts noch ein Dropdown erscheinen. Mein Problem ist das das Dropdown mit Fußball und FItness nach rechts zu breit ist (bzw die Listenpunkte sind zu groß). Bei manchen Änderungen ändert es dann nur die Breite des Punktes Fitness. PS: Das Dropdown bei Verein passt.

html:
<div class="container" id="desktop-nav">
<div class="row">
<div class="col-6">
<a href="index.html" class="logo-link">
<img src="./src/img/2024-12-03_Wappen.png" alt="Logo von WEBDESIGN made simple">
</a>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)">Abteilungen</a>
<ul class="dropdown-content">
<li class="dropdown-right">
<a href="#">Fußball <span class="arrow">&#10148;</span></a>
<ul class="dropdown-content-right">
<li><a href="#">Team 1</a></li>
<li><a href="#">Team 2</a></li>
</ul>
</li>
<li><a href="#">Fitness</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)">Unser Verein</a>
<ul class="dropdown-content" id="dropdown-content-verein">
<li><a href="#">Geschichte</a></li>
<li><a href="#">Mitglieder</a></li>
<li><a href="#">Veranstaltungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

</div>
</div>
</div>

css:
/* === NAVIGATIONSLEISTE === */
#header-nav {
width: 100%;
height: 70px;
background-color: var(--blau);
position: relative;
font-weight: bold;
font-size: 1.1rem;
}
#header-nav a > img {
height: 70px;
width: auto;
margin: 0rem;
float: left;
}
#header-nav ul {
margin: 0;
padding: 0;
float: right;
height: 100%;
}
#header-nav ul > li {
display: inline-block;
padding: .4rem 0.5rem .4rem;
}

#header-nav ul > li > a:link {
color: var(--weiss);
text-decoration: none;
}
#header-nav ul > li > a:visited {
color: var(--weiss);
text-decoration: none;
}
#header-nav ul > li > a:active {
color: var(--hell-grau);
text-decoration: none;
}
#header-nav ul > li > a:hover {
color: var(--hell-grau);
text-decoration: none;
}
#header-nav .col-6 {
padding-top: 0;
padding-bottom: 0;
}
#header-nav .container,
#header-nav .row,
#header-nav .col-6 {
height: 100%;
}
.logo-link {
display: inline-block;
}
/* Dropdown-Styles */
li.dropdown:hover .dropdown-content {
display: block;
}

/* Links im Dropdown */
li.dropdown-content a {
color: white;
padding: 5px 10px;
text-decoration: none;
display: block;
}
li.dropdown-content a:hover {
background-color: var(--blau);
}
/* Standard margin-top für die Links in der Navigation */
#header-nav ul > li > a {
margin-top: 1.2rem;
display: inline-block;
}
/* Neues Dropdown für "Fußball", das nach rechts erscheint */
li.dropdown-right {
position: relative;
margin-top: 10px;
max-width: 120px;
}

li.dropdown-right:hover .dropdown-content-right {
display: block; /* Zeigt das rechte Dropdown bei Hover an */
}
/* Das rechte Dropdown */
li.dropdown .dropdown-content-right {
display: none;
position: absolute;
left: 100%; /* Platziert das Dropdown rechts vom "Fußball"-Menü */
top: 0; /* Verhindert, dass es sich nach unten verschiebt */
background-color: var(--blau);
min-width: 80px;
z-index: 1;
padding: 0;
margin: 0;
}
/* Dropdown-Optionen im rechten Dropdown */
li.dropdown .dropdown-content-right li {
display: block;
padding: 2px 8px;
background-color: var(--blau);
max-width: 100px;/* Breite von dropdown right (Team 1, team 2 */
}
li.dropdown .arrow {
font-size: 0.7rem; /* Pfeil-Größe (du kannst dies nach Belieben anpassen) */
margin-left: 8px; /* Abstand zwischen Text und Pfeil */
opacity: 0; /* Pfeil ist unsichtbar, wenn nicht gehovt */
transition: opacity 0.3s; /* Sanfter Übergang */
}
/* Wenn man über den "Fußball"-Link hovert, wird der Pfeil sichtbar */
li.dropdown:hover .arrow {
opacity: 1; /* Pfeil wird sichtbar */
}
/* Links im rechten Dropdown */
li.dropdown-content-right a {
color: white;
padding: 2px 10px;
text-decoration: none;
display: block;
}
li.dropdown-content-right a:hover {
background-color: var(--blau);
}
.dropdown-content-right a {
padding: 0;
margin: 0;
}
/* Dropdown für "Unser Verein" */
li.dropdown:hover .dropdown-content {
display: block;
}
li.dropdown .dropdown-content {
display: none;
position: absolute;
background-color: var(--blau);
min-width: 160px; /* Minimiere Breite für das Dropdown */
z-index: 1;
padding: 0;
margin: 0;
width: auto; /* Wichtige Änderung: Die Breite des Dropdowns wird auf 'auto' gesetzt, damit es nicht in Spalten aufgeteilt wird */
margin-top: 40px;
}
#dropdown-content-verein{
width: 160px;
}
/* Dropdown-Optionen untereinander */
li.dropdown .dropdown-content li {
display: block; /* Stellt sicher, dass jede Option untereinander ist */
padding: 2px 8px;
background-color: var(--blau);
width: 100%; /* Jede Option nimmt die volle Breite des Containers ein */

}
/* Links im Dropdown */
li.dropdown-content a {
color: white;
padding: 2px 10px;
text-decoration: none;
display: block;
}
li.dropdown-content a:hover {
background-color: var(--blau);
}

 

[Sempervivum]

Mein Problem ist das das Dropdown mit Fußball und FItness nach rechts zu breit ist (bzw die Listenpunkte sind zu groß). Bei manchen Änderungen ändert es dann nur die Breite des Punktes Fitness.

Du benutzt dabei float und das ist bekannt dafür, dass es zu unerwarteten Ergebnissen führt. Ordne die aufklappbaren Listen besser mit absoluter Positionierung an.

Und BTW:
Poste bitte vollständigen Code, damit man sich nicht zusammen reimen muss, dass da noch ein <nav id="header-nav"> drum herum gehört und die CSS-Variablen nach definieren.

 

[bastian48]

Hi,

float nutze ich nur in meiner obigen Navigationsleiste das hat mit den unteren Dropdown Menüs nicht zu tun oder sehe ich das falsch.

Wenn ich bei der Breite von dropdown right was ändere dann ändert sich nicht die ganze Brete sondern nur die bei „Fitness“. Da hat es mir etwas zerschossen deshalb bitte ich um Hilfe

 

[Sempervivum]

float nutze ich nur in meiner obigen Navigationsleiste das hat mit den unteren Dropdown Menüs nicht zu tun oder sehe ich das falsch.

Auch eine unangenehme Eigenschaft von float, dass es sich manchmal wo anders auswirkt als man will. In diesem Fall lautet dein Selektor #header-nav ul d. h. das CSS wirkt auf alle ul-Elemente innerhalb von #header-nav.

 

[bastian48]

Ok danke schonmal.

Aber kannst du mir konkret zeigen wie in meinem Beispiel mir das hilft die Breite einzustellen bitte.

Hast du den Code bei dir laufen lassen? und am besten dann angepasst zurück.

Den das mit float kann ich ändern aber trotzdem ist die Breite so. PS das Bild soll links und die Navigation nach rechts ausgerichtet sein

 

[Sempervivum]

Hast du den Code bei dir laufen lassen?

Genau, anders hätte ich nicht so schnell heraus gefunden, dass da ein float wirkt und dass die Anordnung etwas zerlegt wird, wenn ich es ausschalte.

das Bild soll links und die Navigation nach rechts ausgerichtet sein

Auch das geht viel besser ohne float mit Flexlayout, siehe hier:
https://kulturbanause.de/blog/einfuhrung-in-das-flexbox-modell-von-css/

 

[bastian48]

fraglich ob du hier wirklich helfen möchtest oder nur klugscheissen

 

[scatello]

fraglich ob du hier wirklich helfen möchtest

Fraglich, ob du an einer sinnvollen Lösung interessiert bist.

 

[Sempervivum]

Tatsache ist, dass ich in den letzten Tagen mit anderen Dingen beschäftigt war, technisch und nicht-technisch. Aber bei solcher Ausdrucksweise bin ich raus.

 

[scatello]

Tatsache ist, dass ich in den letzten Tagen mit anderen Dingen beschäftigt war, technisch und nicht-technisch.

Tja, wenn man sonst immer wieder fertige Lösungen liefert so wie hier https://www.html-forum.de/threads/11027/ , dann kommt das leider bei manchen raus, wenn man es mal nicht tut. Aber du lernst es ja nicht.