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%应该是@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;} }我在开发工具中尝试过，这似乎解决了这个问题。同时添加相对于导航容器的位置......整个CSS应如下所示：

{{1}}

向下滑动菜单出现在容器外面

1 个答案: