媒體查詢不重寫原始顯示樣式

Question

我有一個移動菜單，設置爲在加載時不顯示任何內容，然後在媒體上查詢其設置爲顯示塊。

我以前一直這樣做，但沒有問題。但是這不會起作用。

當在firefox inspector中檢查出來時，我可以看到css媒體查詢正在被標準css覆蓋。任何想法爲什麼？

小提琴：

http://jsfiddle.net/4BRRg/

備份代碼：

<nav class="header-nav"> 
     <ul id="nav"> 
      <li><a href="#homepage-gallery" class="scroll">Gallery</a></li> 
      <li><a href="#homepage-about" class="scroll">About</a></li> 
      <li><a href="#homepage-contact" class="scroll">Contact</a></li> 
      <li><a href="#homepage-loyalty" class="scroll">Loyalty Card</a></li> 
     </ul> 
    </nav> 

    <div class="header-nav-mobile"> 
     Menu 
    </div> 

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) { 

.header-nav-mobile { 
    display: block; 
} 

#nav { 
    display: none; 
} 

} 

.header-nav-mobile { 
    float: right; 
    line-height: 40px; 
    width: 60px; 
    height: 40px; 
    text-align: center; 
    color: #fff; 
    background-color: #404040; 
    cursor: pointer; 
    display: none; 
} 

Answer 1

嘗試把下面默認的CSS代碼的媒體查詢，像這樣：

.header-nav-mobile { 
    float: right; 
    line-height: 40px; 
    width: 60px; 
    height: 40px; 
    text-align: center; 
    color: #fff; 
    background-color: #404040; 
    cursor: pointer; 
    display: none; 
} 
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) { 
    .header-nav-mobile { 
     display: block; 
    } 
    #nav { 
     display: none; 
    } 
} 

工作小提琴：http://jsfiddle.net/25zJX/1/

Answer 2

@mediaquery放錯了位置，將其剪下並粘貼在底部。