Пункты меню не отображаются при отображении навигации через медиа-запросы CSS

Question

У меня горизонтальная строка меню, которую я не хочу отображать для экранов с шириной < 610 пикселей. Для этого я устанавливаю свой навигационный тег как:

nav{display:none;}

Теперь я пишу свой медиа-запрос как:

@media screen and (min-width:610px){nav{display:block;}}

Когда я проверяю размер экрана>610 пикселей, я получаю только пустую строку меню без какого-либо элемента списка меню. Кстати, я также использую z-index:2 для моего <ul> тег.

Answer 1

Используйте следующее, обратите внимание на изменения, которые я сделал.

jsFiddle здесь

@media screen and (max-width:610px){
    nav{
        display:none;
    }
}