Панель навигации: второй уровень с полной шириной

Question

Я создал навигационную панель с навигацией первого и второго уровня. Вы можете увидеть последнюю версию здесь как JSFiddle (возможно, вам нужно увеличить ширину кадра, содержащего вывод, чтобы увидеть панель навигации с двумя уровнями).

На данный момент у меня есть несколько вопросов, с этой навигационной панели:

1. Ширина первого элемента уровня «menu1» должен быть только ширина которой нужно будет и не ширина общей ширины элементов внутри навигации второго уровня.
2. Навигация второго уровня должен быть шириной 100% так же, как желтый заголовок, а не только шириной элементов навигационной панели второго уровня.

Так навигационная панель должна выглядеть следующим образом изображение:

Но как это может быть достигнуто, в частности, ширина 100% второго уровня навигационной панели? Я попытался это CSS-Tricks: Full Browser Width Bars с «Использование псевдо-элементов», потому что я не хочу, чтобы это определение глобально на

html, body { 
    overflow-x: hidden; 
} 

Любая помощь высоко ценится!

Answer 1

Это то, что вы хотите http://jsfiddle.net/aytaxykf/5/ Я добавил этот ontop вашего стиля. поэтому, возможно, вы устраните некоторые из правил, которые у вас есть.

.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; 
}