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

Question

我正在制作响应式菜单，但媒体查询中有问题-CSS不适用。 您可以在JSFiddle上查看它。 在JavaScript和Result之间滑动，您可以看到问题所在...单击Toggle菜单。 问题是在此查询@media only屏幕和（最大宽度：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属性也应应用于锚标记，而不是列表项。