jquery - 出现在容器外的向下滑动菜单

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% 我在开发工具中尝试过的，这似乎解决了这个问题。还添加相对于导航容器的位置...整个 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;}

}