css - 自适应导航菜单适合

我正在建立我的第一个响应式网站，但导航菜单有一个小问题。

它可以捕捉到大多数大小的虚拟网格，但是当您水平减小窗口大小时，它将到达失去位置的位置。我将窗口的其余部分的最小宽度设置为350px，并希望它捕捉到该站点其余部分所约束的虚拟行。
当前，“权利：12.5％”使它跟随边界。

该网站可以在这里找到：www.ultimate-punch.com

    /*MEDIA QUERY*/
@media only screen and (max-width : 960px) {
    #main_menuicon {
        display:inline-block;
    }

    nav ul, nav:active ul {
        display: none;
        position: absolute;
        background: #000;
        border: 5px solid #444;
        top: 30px;
        width: 150px;
        right: 12.5%;
        margin: auto;
        height: 200px;
        line-height: 1;
    }

    nav li {
        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;
        font-size: 18px;
        word-wrap: normal;
    }

    nav:hover ul {
        display: block;
    }

    #main_nav li {
        margin-left: 0;
    }
}

最佳答案

首先，为您的position: absolute删除nav ul。

然后，将其添加到#main_menuicon（在常规样式表上，而不是在媒体查询中）：

    #main_menuicon {
      height: 25px;
      margin-top: 14px;
    }

关于css - 自适应导航菜单适合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17568145/