導航菜單不按預期工作

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