Auf Thema antworten

Beitrag

[QUOTE="bastian48, post: 15029, member: 5390"]
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);
}
[/QUOTE]

Authentifizierung