Elementor backdrop blur filter not working in multiple elements

I am building the header template for a elementor website, I want to had a blur effect to the background of my header section that has a css class: navo. Inside the header section there are two columns. Inside of one of those columns there is a nav menu. One of the item of the nav menu has a dropdown submenu. I also want to had the blur effect to the dropdown background.
However, it seems I can only apply the blur css effect to one of the elements, or the header section or the dropdown background, not to both.

This is the css im using:

.navo {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.navo .elementor-nav-menu__submenu {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

The page I need help with: [log in to see the link]