在此 html 菜单之外的页面上单击时，如何关闭此弹出菜单？

Question

此网页有一个功能正常的导航菜单。当您单击导航图标时，将出现一个菜单。当您单击相同的图标时，导航菜单就会消失。

但是，最好确保如果有导航菜单，单击它以外的任何地方也会导致它消失。

我不太明白如何在 js 中执行此操作所以请帮忙

代码 html:

<ul class="main-nav nav navbar-nav">
    <li class="active"><a href="/index.html">ГЛАВНАЯ</a></li>
    <li><a href="#">НОВОСТИ</a></li>
    <li><a href="#">СТАТЬИ</a></li>
    <li><a href="#">ВИДЕО</a></li>
    <li><a href="/onas.html">О НАС </a></li>
</ul>