Как сделать размытие всей страницы при раскрытии меню сайта

.open + main {
  filter: blur(4px);
}

<nav class="open">
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</nav>
<main>
  <p>содержимое документа</p>
<main>

const globalnav = document.querySelector('.globalnav');
globalnav.addEventListener('mouseover', e => {
  if ( e.target.closest('.down') ) {
    globalnav.classList.add('open');
  } else {
    globalnav.classList.remove('open');
  }
});
globalnav.addEventListener('mouseout', e => {
  globalnav.classList.remove('open');
});

.globalnav {
  height: 50px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.843);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
}

/* добавлено размытие соседнего <main>, но вероятнее всего, что вам будет удобнее охватить куда больше соседей при помощи  '.globalnav.open ~ *'   */
.globalnav.open + main {
  filter: blur(16px);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  text-decoration: none;
  outline: none;
}

.topmenu {
  backface-visibility: hidden;
  height: 50px;
  z-index: 3;
  font-size: 16px;
  margin-top: 6px;
  position: sticky;
  display: flex;
}

.topmenu>li {
  position: relative;
  display: flex;
  padding: 12px 20px 0px 15px;
}

.topmenu>li>a {
  color: rgb(0, 0, 0);
  transition: .4s ease-in-out;
  vertical-align: 100px;
  display: flex;
}

.down:after {
  margin-left: 8px;
}

.topmenu li a:hover {
  color: rgb(23, 129, 226);
}

.submenu {
  background: white;
  position: fixed;
  display: flex;
  justify-content: center;
  left: -0px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  width: 100vw;
  height: 300px;
  transform: translateY(-100px)scaleY(0.1);
  transform-origin: 0% 0%;
  transition: .6s ease-in-out;
  z-index: -1;
}

.sub-menu__container {
  width: 50vw;
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  margin-left: -300px;
}

.topmenu>li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}

.submenu li a {
  color: rgb(0, 0, 0);
  font-size: 16px;
  line-height: 20px;
  padding: 0 25px;
  transition: .4s ease-in-out;
}

.sub-menu-title {
  color: rgb(0, 0, 0);
  font-size: 13px;
  line-height: 36px;
  padding: 10px 25px;
  transition: .4s ease-in-out;
}

.nav-logo {
  height: 30px;
  position: absolute;
  top: 10px;
  margin: 0 -30px;
}

.menu-link {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.black {
  color: black;
}

.ico {
  font-family: ico;
  font-size: 150%;
  margin-top: -7.5px;
  text-align: center;
}

.blue {
  color: rgb(23, 129, 226);
}

<nav class="globalnav">
  <div class="navbar">
    <ul class="topmenu">
      <li><a class="ico" href="/home.html">?</a></li>
      <li class="down"><a href="" class="menu-link">Творчество</a>
        <div class="submenu">
          <div class="sub-menu__container">
            <ul id="menu-1" class="sub">
              <p class="sub-menu-title">Академическая музыыка</p>
              <li><a class="sub-menu-link" href="">Нео-барокко</a></li>
              <li><a class="sub-menu-link" href="">Нео-классика</a></li>
              <li><a class="sub-menu-link" href="">Модерн</a></li>
              <li><a class="sub-menu-link" href="">Современная музыка</a></li>
              <li><a class="sub-menu-link" href="">Религиозная музыка</a></li>
            </ul>
            <ul class="sub">
              <p class="sub-menu-title">Эстрадная музыка</p>
              <li><a class="sub-menu-link" href="">Мюзиклы</a></li>
              <li><a class="sub-menu-link" href="">Песни</a></li>
              <li><a class="sub-menu-link" href="">Саундтреки</a></li>
            </ul>
            <ul class="sub">
              <p class="sub-menu-title">Литература</p>
              <li><a class="sub-menu-link" href="">О музыке</a></li>
              <li><a class="sub-menu-link" href="">Короткие рассказы</a></li>
              <li><a class="sub-menu-link" href="">Повести и романы</a></li>
              <li><a class="sub-menu-link" href="">Театральные постановки</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li><a href="/schedule.html">Афиша</a></li>
      <li><a href="">Блог</a></li>
      <li><a href="">О нас</a></li>
      <li><a class="ico" href="#">?</a></li>
    </ul>
  </div>
</nav>
<main>
  <h1>Заголовок</h1>
  <p>Много текста</p>
</main>