响应式导航菜单适合

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

它捕捉到大多数大小的虚拟网格，但是当您沿水平方向缩小窗口大小时，它会到达失去位置的点。我有一个最小宽度设置为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; 
    } 
}

来源

2013-07-10 DorianHuxley

真的不知道什么是这里的问题.. – grmmph

可以做些什么来解决这个问题？ – DorianHuxley

也许只有我，但需要解决的是什么？ – grmmph

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

然后，将它添加到#main_menuicon（对普通样式表，而不是媒体查询）：

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

来源

2013-07-10 12:42:40 grmmph

谢谢！取消位置：绝对做到了这一点，并在适当的地方重新定义了边距 – DorianHuxley

响应式导航菜单适合

回答

相关问题