特定DOM元素中只有一个活动背景过滤器

Question

我正在尝试实现某种模糊效果，并且具有以下结构。

<header id="main-header">
    <nav class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="medium-18 large-auto cell" id="colm">
                <ul class="menu" id="main-menu">
                    <li class="active"><a href="/">Home</a></li>
                    <li id="projlink"><a href="/projects">Projects</a>
                        <div class="bigmenu"></div>
                    </li>
                    ...
                </ul>
            </div>
        </div>
    </nav>
</header>

关于样式，我有以下内容：

header#main-header {
    background: rgba($green, 0.76);
    backdrop-filter: blur(3px) hue-rotate(520deg);
}

该部分工作正常，我得到以下结果：

然后，当我有悬停效果时，我有一个全角菜单，我想应用相同的效果，但是背景滤镜不适用于第二个元素。

对于子元素.bigmenu，我有完全相同的规则：

.bigmenu {
    background: rgba($green, 0.76);
    backdrop-filter: blur(3px) hue-rotate(520deg);
}

但是结果是这样的：

您可以看到下面的绿色条纹没有模糊。我检查了一下，发现它是一个相对较新的样式定义，并且并非100％兼容，但是我不确定它在父子样式方面的表现，因为如果我注释{{的backdrop-filter 1}}我得到以下结果：

我开始考虑也许它只能在一个元素上起作用，但是随后我在标头外部创建了一个测试#main-header，效果相同，当我将其放在标头上时，它会模糊标头，因此这是一个与亲子有关的问题。

这是我的代码结构问题还是与CSS定义有关？

标题上方另一个div的示例。如您所见，另一个元素模糊了它下面的所有内容。

我想到的是可能将<div>之外的.bigmenu元素分开，但是我认为在处理悬停效果方面会感到不舒服，并且会涉及使用jQuery处理mouseenter和鼠标移出事件。