Navigation Bar: Second level with full width - html

Question

I created a navigation bar with a first and second level navigation. You can see the latest version here as a JSFiddle (maybe you have to increase the width of the frame containing the output to see the navigation bar with two levels).
At the moment, I have several issues with this navigation bar:
The width of the first level element "Menu1" should only be the width which it will need and not the width of the total width of the elements inside the second level navigation.
The second level navigation should be width 100% so the same as the yellow header and not only the width of the elements of the second level navigation bar.
So the navigation bar should look like the following image:
But how can this be achieved, especially the width of 100% of the second level navigation bar? I tried this CSS-Tricks: Full Browser Width Bars with "Using pseudo elements", because I did not want to have this definition globally on
html, body {
overflow-x: hidden;
}
Any help is highly appreciated!

Answer 1

Is this what you want http://jsfiddle.net/aytaxykf/5/
i added this ontop of your styling. so you can probably remove some of the rules you have there
.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;
}