HTML-CSS-Menü - kann keine Untermenu-Inhalte in voller Breite machen

Question

Ich habe seit Jahren versucht, aber ich kann den Dropdown-Inhalt im Menü Elemente 4 & 5 volle Breite nicht machen. Menüpunkte 2 & 3 funktionieren perfekt für mich, aber die Bilder innerhalb von 4 & 5 werden nicht unter dem Menü zentriert, sondern nur an den entsprechenden Menüpunkt angeheftet. Ich möchte, dass alle 4 Bilder mit der Schaltfläche "Alle anzeigen" in der Mitte angezeigt werden.

<ul id="nav"> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 1</a></li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 2</a> 
    <div class="dropdown-content"> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 3</a> 
    <div class="dropdown-content"> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 4</a> 
    <div class="dropdown-bar"> 
     <div id="totwsilversbar"> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     </div> 
     <div class="viewallbutton">VIEW ALL</div> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 5</a> 
    <div class="dropdown-bar"> 
     <div id="totwsilversbar"> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     </div> 
     <div class="viewallbutton">VIEW ALL</div> 
    </div> 
    </li> 
</ul> 

Hier ist der vollständige Code Ich arbeite mit: https://jsfiddle.net/Lparker77/h5ek2wpm/2/

Auf der Geige Sie das Ergebnisfenster anpassen müssen das vollständige Menü zu zeigen.

Es ist das erste Mal, dass ich eine Website von Grund auf neu programmiere, also bin ich mir nicht sicher, ob die ganze Struktur des Codes das Problem ist oder ob es nur ein paar Änderungen am CSS gibt.

Jede Hilfe oder Beratung wird geschätzt.

Answer 1

Aktualisieren Sie Ihre ID-Werte auf 'totwsilversbar1' (Menü 4) bzw. 'totwsilversbar2' (Menü 5).

Und Ihre CSS wie folgt ändern:

#totwsilversbar1 { 
width: 100% !important; 
height: 210px !important; 
position: relative !important; 
left: -705px;} 

#totwsilversbar2 { 
width: 100% !important; 
height: 210px !important; 
position: relative !important; 
left: -940px;} 

JS Fiddle: https://jsfiddle.net/h5ek2wpm/10/