製作響應菜單，css不適用於某些媒體查詢

我正在製作響應菜單，並且在媒體查詢中遇到問題 - CSS不適用。您可以在JSFiddle上查看它。在JavaScript和結果之間滑動，你可以看到什麼是問題...點擊切換菜單。問題是在該查詢僅@media屏幕和（最大寬度：767px）製作響應菜單，css不適用於某些媒體查詢

@media only screen and (max-width: 767px) { 
.menu-main, .logo-seperator { 
    display:none; 
} 

.toggle-menu{ 
    width:100%; 
    margin-top:110px; 
    height:40px; 
    background-color:#6c6c6c; 
    display:block; 
} 

/*DOESNT APPLY*/ 
.menu_main{ 
    background:blue; 
    width:100%; 
    z-index: 20; 
} 
/*DOESNT APPLY*/ 
.menu_main li{ 
    text-decoration: none !important; 
    width:100% !important; 
    height:20px !important; 
    background-color:black !important; 
} 
}

來源

2014-07-09 user3809590

究竟是什麼問題？ – rageit

它似乎對我來說正確工作。但是，如果您從較小的佈局開始，然後單擊「切換菜單」以顯示菜單，然後再次單擊它以隱藏菜單，最後將屏幕展開爲較大的佈局，菜單將被隱藏。這很可能是因爲jQuery使用內聯樣式來隱藏菜單，該菜單將覆蓋樣式表規則以顯示它。 –

嘗試添加一些css到有問題的查詢，你會看到什麼問題 – user3809590

有一個錯字。在你提到的媒體查詢時，CSS選擇器中使用下劃線代替破折號：

這個：.menu_main

應該是：.menu-main

http://jsfiddle.net/WF7CX/

另外，text-decoration屬性應應用於錨標記，而不是列表項。

來源

2014-07-09 15:20:54

omg ...謝謝你...對不起 – user3809590

製作響應菜單，css不適用於某些媒體查詢

回答

相關問題