Navigationsleiste: Zweite Ebene mit voller Breite

Question

Ich habe eine Navigationsleiste mit einer Navigation der ersten und zweiten Ebene erstellt. Sie können die neueste Version hier als JSFiddle sehen (vielleicht müssen Sie die Breite des Rahmens mit der Ausgabe erhöhen, um die Navigationsleiste mit zwei Ebenen zu sehen).

Im Moment habe ich einige Probleme mit dieser Navigationsleiste:

1. Die Breite des ersten Level-Elements „Menu1“ sollte nur die Breite, die es wird die Breite der Gesamtbreite benötigt und nicht der Elemente in der Navigation der zweiten Ebene.
2. Die Navigation auf der zweiten Ebene sollte 100% entsprechen, also genauso wie die gelbe Kopfzeile und nicht nur die Breite der Elemente der Navigationsleiste auf der zweiten Ebene.

So ist die Navigationsleiste sollte wie folgt aussehen:

Aber wie kann dies erreicht werden, vor allem die Breite von 100% der zweiten Ebene Navigationsleiste? Ich habe versucht, diese CSS-Tricks: Full Browser Width Bars mit „Elementen Pseudo verwenden“, weil ich nicht auf

diese Definition global haben wollte

html, body { 
    overflow-x: hidden; 
} 

Jede Hilfe ist sehr willkommen!

Answer 1

Ist es das, was Sie wollen? http://jsfiddle.net/aytaxykf/5/ ich habe dieses ontop von Ihrem Styling hinzugefügt. so können Sie wahrscheinlich einige der Regeln, die Sie dort haben, entfernen

.top-bar { 
    position: relative; 
} 
.top-bar-section { 
    height: 70px; 
} 
ul.sub-menu { 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: blue; 
    text-align:center; 
} 
ul.sub-menu li{ 
    display: inline-block; 
    float: none; 
} 
.menu-center a { 
    position: relative; 
} 

.menu-center .active > a:before { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -10px; 
    content: ""; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 10px 10px 10px; 
    border-color: transparent transparent lime transparent; 
}