导航菜单不按预期工作

Question

我有一个导航菜单图标，我只想在小屏幕上显示它（小于768px）。 下面是代码

@media screen and(max-width:768px){ 
 
    .nav-menu{display:block;} 
 
} 
 
.nav-menu{ 
 
    display:none; 
 
}

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

但是它不是小screen.What可见不对我提前code.Thanks。 UPDATE： 这里JS FIDDLE

Answer 1

最后 我得到的回答有愚蠢的错误：

.nav-menu{ 
 
    display:none; 
 
} 
 
@media screen and (max-width:768px){ 
 
    .nav-menu{display:block;} 
 
}

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

Answer 2

你必须把这些规则周围，否则，第二个将覆盖第一：

.nav-menu{ 
    display:none; 
} 
@media screen and (max-width:768px){ 
    .nav-menu{display:block;} 
}