響應式導航菜單適合

我正在製作我的第一個響應式網站，並且導航菜單有一個小問題。響應式導航菜單適合

它捕捉到大多數大小的虛擬網格，但是當您沿水平方向縮小窗口大小時，它會到達失去位置的點。我有一個最小寬度設置爲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

響應式導航菜單適合

回答

相關問題