Отзывчивое меню, открывающееся по запросу

Я написал этот js, чтобы меню было отзывчивым, но не ломалось, когда js не включен.

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

На данный момент первый список скрывается при открытии страницы, но другой список отображается постоянно. Однако щелчок по любой кнопке меню выполняет ту же работу по отображению первого списка. Ни одна навигация не имеет идентификатора или класса.

Почему только один из списков отвечает?

Это JS (в голове)

function showLists() {
$('.nav').show();
$(".menu").hide();
}
$(document).ready(function() {
if ($(window).width() < 450) {
    $('.nav').hide();
    $(".menu").click(function () {(
        showLists()
        )})
    }
});