Слайд-меню, появившееся за пределами контейнера

Question

У меня есть следующее меню jQuery slideDown, которое я пытаюсь построить. Мне удалось поместить его влево без поплавка, но, похоже, ширина его ограничена.

http://www.pureelysium.com/PPTest

У меня есть следующий запрос СМИ

@media only screen and (min-width: 480px) and (max-width: 767px) 
{ 
    .main-nav {display:none;} 
    #logobadge {margin-left: 220px; width: 185px; height: 115px;} 
    #show-nav {display: block;} 
    .main-nav {left: 0; margin: 0; width: auto;} 
    .main-nav ul li, .main-nav ul li a 
    { 
     float: none; 
     width: auto; 
     background-color: #000000; 
     clear:both; 
    } 
} 

Как следующий код меню:

<div class="show-nav" id="show-nav"><a href="#">Show Navigation</a> 
    <nav id="nav" role="navigation"><?php wp_nav_menu(array('container_class' => 'main-nav', 'container' => 'nav')); ?></nav> 
</div> 

Может кто-нибудь посоветовать? Поскольку я пробовал все, чтобы сделать это, нажмите контент вниз, нажав кнопку навигации.

Answer 1

Это width: auto должно быть width: 100% Я пробовал его в инструментах dev и, похоже, исправил эту проблему. Кроме того, добавить положение относительно вашего нав контейнера ... весь CSS должен выглядеть следующим образом:

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .main-nav {display:none;} 
    .centering {width: 520px; margin: 0;} 
    #logobadge {margin-left: 220px; width: 185px; height: 115px;} 
    #show-nav {display: block;} 
    .main-nav {left: 0; margin: 0; width: 100%; position: relative;} 
    .main-nav ul li, .main-nav ul li a { 
     float: none; 
     width: 100%; 
     background-color: #000000; 
     clear:both; 
    } 
    #serviceareawrap {width: 580px; padding: 0 15px 0 20px; } 
    #contentwrap {width: 580px; padding: 0 15px 0 20px;} 
    .newstitle {display: none;} 
    #innermaincontent {padding: 0;} 
    #innermaincontent, #recentpostswrap, #footerinner {width: 580px; border: none; float: left;} 
    #serviceareawrap #area1, #serviceareawrap #area2, #serviceareawrap #area3, #serviceareawrap #area4 {width: 135px;} 
    #footerarea1 {float: left; width: 200px; padding: 5px 10px;} 
    #footerarea2 {float: right; width: 200px; padding: 5px 10px; min-height: 225px; text-align: right;} 
    #footerarea3 {float: left; width: 200px; margin-top: 20px;} 
    #footerarea4 {float: right; width: 200px; padding: 5px 10px; text-align: right;} 
    #footerarea5 {float: left; width: 200px; padding: 5px 10px; height: 50px!important;} 
    #socialicons {width: 580px; padding-left: 15px;} 

}