wie man jedes Dropdown-Menü nach der Schaltfläche ausgerichtet über

Question

ausrichten Ich bin neu in der Codierung und habe es geschafft, eine Navbar mit den ersten beiden Tasten als Dropdown-Menüs zu machen. Ich habe jedoch bemerkt, dass wenn ich über den ersten Button schwebe, es gut geht, wenn ich über den zweiten Dropdown-Button blogge, wird das Dropdown-Menü direkt unter dem ersten Button angezeigt, während die richtigen Informationen angezeigt werden. Here ist ein Foto zu erklären, was ich meine.

Und hier ist mein Code, was ich hier versucht habe ist, den gesamten Code, den ich für das erste Dropdown-Menü geschrieben habe, wiederzuverwenden und dann eine Klasse zum zweiten Dropdown hinzuzufügen, etwas zu ändern, was notwendig ist, um das Menü zu machen ausrichten auf die zweite Dropdown-Button:

#NavBar { 
 
\t width: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: relative; 
 
} 
 

 
#NavBar ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t height:25px; 
 
} 
 

 
#NavBar ul li { 
 
\t list-style-type: none; 
 
\t width: 25%; 
 
\t display: inline-block; 
 
\t float: left; 
 
\t background-color: #eecbff; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.DropBtn { 
 
\t width: 100%; 
 
\t font-size: 25px; 
 
\t border: 0; 
 
\t background-color: #eecbff; 
 
} 
 

 
.DropBtn:hover { 
 
\t background-color: #ffd4e5; 
 
\t border: 0; 
 
\t border-radius: 8px 8px 0 0; 
 
} 
 

 
.Dropdown { 
 
\t position: relative; 
 
\t display: block; 
 
} 
 

 
.DropContent { 
 
\t display: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t background-color: #ffd4e5; 
 
\t width: 25%; 
 
\t top: 31px; 
 
\t border: 0; 
 
\t border-radius: 0 0 8px 8px; 
 
} 
 

 
.Dropdown:hover .DropContent { 
 
\t display: block; 
 
\t border-radius: 0 0 8px 8px; 
 
} 
 

 
.DropContent a { 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t color: black; 
 
\t height: 30px; 
 
\t text-align: center; 
 
} 
 

 
.Dropdown:hover .DropBtn { 
 
\t background-color: #ffd4e5; 
 
\t border-radius: 8px 8px 0 0; 
 
} 
 

 
.DropContent a:hover { 
 
\t background-color: #feffa3; 
 
\t border-radius: 0 0 8px 8px; 
 
} 
 

 
.Second .DropContent{ 
 
\t position: absolute; 
 
\t left: 25%; 
 
}

<div id="NavBar"> 
 
\t <ul> 
 
\t \t <div class="Dropdown"> 
 
\t \t <li><button class="DropBtn">Dropdown 1</button></li> 
 
\t \t \t <div class="DropContent"> 
 
\t \t \t \t <a href="#">Link 1</a> 
 
\t \t \t \t <a href="#">Link 2</a> 
 
\t \t \t \t <a href="#">Link 3</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="Dropdown"> 
 
\t \t <li><button class="DropBtn Second" >Dropdown 2</button></li> 
 
\t \t \t <div class="DropContent"> 
 
\t \t \t \t <a href="#">Link 4</a> 
 
\t \t \t \t <a href="#">Link 5</a> 
 
\t \t \t \t <a href="#">Link 6</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <li><button class="DropBtn">Dropdown 3</button></li> 
 
\t \t <li><button class="DropBtn">Dropdown 4</button></li> 
 
\t </ul> 
 
</div>

ich bin sehr traurig, wenn mein Code sehr langatmig, ich bin sicher, dass es Teile, die nicht einmal notwendig sind, irgendwelche Tipps oder Kommentare über meinen Code im Allgemeinen würde sehr geschätzt werden.

Answer 1

Wickeln Sie Ihr Listenelement in einem div. Unter Verwendung Ihrer aktuellen Stile würde ich die <div class="Dropdown"> löschen und diese Klasse nur auf den Listeneintrag anwenden. Wenn Sie dies tun, wird Ihr Dropdown-Programm wie vorgesehen funktionieren. Sehen Sie meinen bearbeiteten HTML unten.

Ich denke, der Grund dafür ist, dass Ihr Dropdown-Div nicht wirklich eine Breite oder Höhe hat, weil seine Kinder entweder schweben oder absolut positioniert sind. Es ist auch nicht notwendig, dies zu tun, da das Listenelement selbst in der Lage ist, ein Elternteil für Ihren Dropdown-Inhalt zu sein, und es hat bereits die Position, die Sie benötigen.

Änderungen vorgenommen: Wrapped das .DropContent div in das li-Tag mit der Schaltfläche. Das übergeordnete .Dropdown-Div entfernt und die .Dropdown-Klasse zum li hinzugefügt.

<div id="NavBar"> 
    <ul> 
     <li class="Dropdown"> 
      <button class="DropBtn">Dropdown 1</button> 
      <div class="DropContent"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
       <a href="#">Link 3</a> 
      </div> 
     </li> 
     <li class="Dropdown"> 
      <button class="DropBtn" >Dropdown 2</button> 
      <div class="DropContent"> 
       <a href="#">Link 4</a> 
       <a href="#">Link 5</a> 
       <a href="#">Link 6</a> 
      </div> 
     </li> 
     <li><button class="DropBtn">Dropdown 3</button></li> 
     <li><button class="DropBtn">Dropdown 4</button></li> 
    </ul> 
</div> 

Editierte Formatierung.

Answer 2

Versuchen Sie DropContent divs innerhalb des entsprechenden <li> Tages platzieren, wie das Beispiel unten:

<div class="Dropdown"> 
    <li> 
    <button class="DropBtn Second">Dropdown 2</button> 
    <div class="DropContent"> 
     <a href="#">Link 4</a> 
     <a href="#">Link 5</a> 
     <a href="#">Link 6</a> 
    </div> 
    </li> 
</div>