Blur the entire html when the sub-menu is open

I created a submenu using HTML and CSS. The elements of the submenu open when hovered on the elements of nav-list. I need help figuring out how to blur the HTML's main content when the nav-list hovers and sub-menu is open. When open, the submenu will have a picture below it and multiple pictures and classes further down. The current code does blur the HTML, but the problem is, to blur the entire HTML, I need to add each class below the submenu to CSS individually.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.nav-list>li:hover>a::after {
width: 100%;
}
/* CSS for blur effect */
.blurred::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
filter: blur(5px);
/* adjust the blur amount */
z-index: 900;
visibility: hidden;
}

<!-- language: lang-html -->

<div class="main" id="navbar">
<div class="logo">
<a href="">XYZ<br>123</a>
</div>
<nav class="menu">
<ul class="nav-list">
<li>
<a href="">Men</a>
<ul class="sub-menu">
<li><a href="#">shirts</a> </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="main">
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<footer>
1
</footer>
<script>
var subMenu = document.querySelector('.sub-menu');
var main = document.querySelectorAll('main');
subMenu.addEventListener('mouseover', function() {
main.forEach(function(elem) {
elem.classList.add('blurred');
});
});
subMenu.addEventListener('mouseout', function() {
main.forEach(function(elem) {
elem.classList.remove('blurred');
});
});
</script>

<!-- end snippet -->

You only need to add the blurred class to the main container div, all content will be blurred in it.

Demo for blur on hover over hamburger (you can change that to blur only on sub-menu hover). There is a 2 sec delay on mouse-out to that you have time to scroll down to see the blurred image:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const hamburger = document.getElementById('hamburger');
const main = document.getElementById('mainContainer');
hamburger.addEventListener('mouseover', function() {
main.classList.add('blurred');
});
hamburger.addEventListener('mouseout', function() {
setTimeout(() => main.classList.remove('blurred'), 2000);
});

<!-- language: lang-css -->

.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color: #eee;
}

<!-- language: lang-html -->

<div class="main" id="navbar">
NAVBAR mouse over to blur ==>   <span id="hamburger">☰</span>
<hr />
</div>
<div class="main" id="mainContainer">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis blandit felis vel hendrerit. Morbi nunc augue, pellentesque eu laoreet in, bibendum nec sem.</p>
<ul><li>In eu libero eget nulla laoreet aliquet in quis augue.</li><li>Praesent vulputate leo tellus, quis eleifend purus viverra vitae.</li><li>Phasellus eget augue venenatis, facilisis nulla sed, consequat lorem.</li></ul>
<p>Duis sapien diam, dignissim quis imperdiet eget, hendrerit nec nulla. Nam nisi purus, ultrices nec fringilla vitae, interdum vitae nunc.</p>
<p><img src="https://via.placeholder.com/500x90/000000/FFFFFF.png?text=This+is+an+embedded+image" /></p>
<p>Integer lobortis tellus a orci ultrices, at varius risus fermentum. Maecenas maximus elit sit amet varius facilisis. Morbi molestie rutrum eros, id molestie dui maximus in. Etiam fermentum felis eu vehicula euismod.</p>
</div>
<footer>
<hr />
FOOTER
</footer>

<!-- end snippet -->