Запрос на медиатеку NOT overriding original display styling

Question

У меня есть мобильное меню, которое настроено для отображения без нагрузки, а затем на запросе на мультимедиа его набор для отображения блока.

Я всегда делал это в прошлом, но не имел никаких проблем. Однако это не сработает.

Когда вы проверяете его в инспекторе firefox, я вижу, что запрос css-media находится под управлением стандартного 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 неуместен, вырезаем и вставляем его внизу.