Span DIV 100% ширина веб-страницы

Question

У меня есть ссылка «Услуги» на моей веб-странице, которую при нажатии отображает подменю. Я хотел бы охватить это подменю на 100% ширины моей страницы.

Это возможно & Как мне изменить свой код, чтобы это можно было сделать?

Fiddle:http://jsfiddle.net/19y4qnkx/

Я использую Bootstrap.

Вот мой HTML:

<ul class="nav navbar-nav navbar-left "> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Services </a> 

        <ul class="dropdown-menu"> 
       <li><div class="yamm-content"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> </ul></div> 
      </li> 
</ul> 

    </li> 

</ul> 

Большое спасибо

Answer 1

Вы должны предоставить 100% ширину выпадающему меню и всем своим родителям. Но ссылка на службы также будет иметь полный доступ.

.navbar-nav 
{ 
    width: 100%; 
} 

.dropdown{ 
width: 100% 
} 

.dropdown-menu{ 
width: 100% 
} 

Я обновил ваш скрипку http://jsfiddle.net/19y4qnkx/4/

Edit: Просто увидел, что это ломает стиль на небольших экранах. Вот обновленная скрипка с медиа-запросом http://jsfiddle.net/19y4qnkx/6/

Answer 2

Может быть, вы могли бы использовать устройство Vw в вашем CSS для ".dropdown меню", как это:

.dropdown-menu{ 
    min-width: 100vw; 
} 

I здесь вы можете здесь проверить совместимость http://caniuse.com/#feat=viewport-units.

Answer 3

Я не знаю, правильно ли я понял или даже приблизился к нему, потому что очень сложно менять применяемые стили загрузочного CSS. Тем не менее, я изменил DIV: <div class="yamm-content"> использовать CSS класс 'test', а в следующей fasthion: <div class="yamm-content test">

Ниже приводится тестовый класс CSS:

.test { 
    width: 100%; 
    background-color: yellow; 
} 

Fiddle

Теперь, когда вы раскрывающееся меню фон подменю отображается желтым цветом. Текст меню «Сервис» имеет красную рамку вокруг него, поэтому есть еще тонкая настройка. Ну, похоже, это сложно изменить после стилей CSS Bootstrap. Я не знаю, можно ли это решить, выполнив свой собственный Bootstrap customization.