Question

我正在创建我的第一个响应式网站，并且导航菜单出现了一个小问题。

它捕捉到大多数大小的虚拟网格，但是当你逐渐减小窗口大小时，它会到达失去位置的点。对于窗口的其余部分，我将最小宽度设置为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;
    }
}

Answer 1

首先，删除position: absolute的<{1}}。

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

#main_menuicon

响应式导航菜单适合

1 个答案: