2

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

它会捕捉到大多数大小的虚拟网格，但是当您水平减小窗口大小时，它会到达失去位置的点。我将窗口其余部分的最小宽度设置为 350 像素，并希望它与站点其余部分约束的虚拟线对齐。当前，“右：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;
    }
}
4

1 回答 1

1

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

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

    #main_menuicon {
      height: 25px;
      margin-top: 14px;
    }
于 2013-07-10T12:42:40.823 回答