Подменю полной ширины в Bootstrap 3 без использования MegaMenu ⇐ CSS

[Anonymous]

У меня есть простая навигация с фиксированным верхом, использующая Bootstrap 3.0, который использует функцию подменю. Я пытаюсь, чтобы мое подменю занимало всю ширину контейнера, а не только ширину объединенных элементов подменю. Похоже, проблема связана с кодом ul.dropdown-menu, в котором ширина установлена ​​на ~160 пикселей; Мало того, он отказывается расширяться влево за вкладку раскрывающегося меню. Это проблема, потому что моя свернутая навигация расположена справа. Ой.
Ниже приведен пример моего текущего решения.

FIDDLE FIDDLE FIDDLE, ДА!

HTML:

Код: Выделить всё

Toggle navigation




[url=index.html][/url]

[list]
[*]
[url=#]Films [/b][/url]



[url=#][/url]
[*][url=#][/url]
[*][url=#][/url]
[*][url=#][/url]
[*][url=#][/url]
[*][url=#][/url]
[/list]



[*][url=#about]About[/url]
[*][url=#contact]Contact[/url]

CSS (извините, так специфично, я использую SASS):

Код: Выделить всё

.navbar.navbar-default.navbar-fixed-top {
background-color: #454545;
border: none;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.active a, .navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li a:hover {
color: #ffcc00;
background-color: #454545;
height: inherit;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu {
list-style-type: none;
width: 100%;
background-color: white;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container {
background-color: white;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline {
list-style-type: none;
width: 100%;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline li.placeholder {
margin: 0 20px;
height: 100px;
width: 70px;
background-color: #999999;
}

На данный момент самое близкое решение, с которым я столкнулся, — это добавление контейнера в раскрывающееся меню, однако я все еще не могу расширить раскрывающееся меню за пределы его ширины ~ 160 пикселей.

Общая цель — создать раскрывающееся меню на всю ширину. Сейчас не беспокоюсь о том, как это будет выглядеть на мобильных устройствах.

Спасибо

Подробнее здесь: https://stackoverflow.com/questions/201 ... g-megamenu