制作响应式菜单，css不适用于某些媒体查询

Question

我正在制作响应式菜单，我在媒体查询中遇到问题 - CSS不适用。您可以在JSFiddle上查看。在JavaScript和Result之间滑动，您可以看到问题所在...单击切换菜单。问题出在此查询 @media only屏幕和（max-width：767px）

@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;
}
}

Answer 1

有一个错字。在您提到的媒体查询中，css选择器使用下划线而不是短划线：

这：.menu_main

应该是：.menu-main

http://jsfiddle.net/WF7CX/

此外，text-decoration属性应该应用于锚标记，而不是列表项。