jQuery下拉菜单和CSS媒体查询冲突

所以让我们从HTML开始。也许不需要麻烦把它放在这里，但无论如何我会给你们看的。

        <div class="menu col md12 sm02 mn03">
            <div class="lines"></div>
            <div class="lines"></div>
            <div class="lines"></div>
        </div>
        <div class="nav col mx07 lg08 md12 sm12 mn12">
            <ul>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Company</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Solutions</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Services</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Websites</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Software</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Contact</a></li>
            </ul>
        </div>

现在是CSS。我已经设置好了，所以我的菜单按钮保持隐藏状态。

.menu {display: none;}

然后，当屏幕低于701像素时，媒体查询就会出现，其中一部分就是这样。

.menu {display: inherit;}
.nav {display: none;}

然后，好的ol'jQuery进入，使我的导航栏在点击菜单按钮时切换。

$(document).ready(function() {
    $(".menu").click(function() {
        $(".nav").toggle("slow");
    });
});

现在是问题了。我转到较小的屏幕大小，它会激活我的菜单按钮并隐藏我的导航栏。点击菜单按钮，导航栏出现。好极了再点击一下，它就消失了。好极了

除了当我回到更大的屏幕尺寸时，导航栏不会回来。菜单按钮消失了，但导航栏不会显示，除非我回到较小的尺寸，打开它，然后再次回到较大的尺寸。我知道这里发生了什么，这是最容易的部分。Jquery更改并覆盖CSS，并告诉浏览器"好吧，一直隐藏它。"

所以问题是，无论切换状态如何，当我回到更大的屏幕尺寸时，我如何使导航栏返回？

我已经没有最后一部分的代码了，但有一次我已经到了Javascript检查屏幕大小的地方，但JS和CSS的屏幕大小从来都不一样，所以我放弃了这个解决方案。

提前感谢您的回答。