Css дисплей не работает

Question

@media screen and (min-width: 900px) and (max-width: 1215px) { 
#menu { 
     display:none; 
    } 
} 

Это не работает, div все еще отображается. Однако, если я изменю дела до <div class="menu"> вместо <div id="menu"> и CSS:

@media screen and (min-width: 900px) and (max-width: 1215px) { 
    .menu { 
     display:none; 
    } 
} 

это работает. Почему это происходит?

EDIT

Вот что говорит инспектор:

element { 
    display: block; 
} 
#listMenuTop { 
    display: none; 
} 
#listMenuTop { 
    display: none; 
    margin-bottom: -14px; 
    margin-top: 10px; 
} 

Но оба дисплея: нет скрещены. Где находится дисплей: block; происходит от ?

EDIT 2

Я нашел проблему. Функция JS была перезапись свойства отображения CSS:

document.getElementById('listMenuTop').style.display='block'; 

То, что я хочу сделать, это скрыть #listMenuTop когда экран> = 900px и когда экран < 900px, чтобы иметь возможность отобразить/скрыть #listMenuTop от кнопки. Проблема в том, что когда #listMenuTop отображается на экране < 900px, он не скрывает, если я изменяю размер экрана более чем на 900 пикселей, потому что эта функция js всегда переписывает свойство отображения.

Answer 1

Попробуйте вместо этого:

@media screen and (min-width: 900px) and (max-width: 1215px) { 
    #menu { 
     display:none !important; 
    } 
} 

Благодаря

Answer 2

Поскольку ваш инспектор говорит, что вы имеете встроенные стили добавлены Javascript (вопрос обновлено) как:

<div id="listMenuTop" style="display: block;"> ... </div> 

чем ваш CSS должен выглядят так:

@media screen and (min-width: 900px) and (max-width: 1215px) { 
     /* Following will override inline style */ 
     #listMenuTop[style] { 
      display: none !important; 
     } 
}