Фоновый фильтр: размытие (); не работает правильно ⇐ CSS

[Anonymous]

Я использую scss и внутри моего файла _header.scss, который я использую внутри моего main.scss, следующим образом: @use "header"; у меня есть следующий код (я вырезал некоторые неважные части, такие как границы, поля, отступы, размер шрифта и т. д.):

Код: Выделить всё

header {
position: fixed;
width: calc(96% - 32px);
height: 34px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 10;
backdrop-filter: blur(12px);
background: rgba(#000000, 0.1);

nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

ul {
list-style-type: none;
display: flex;
flex-direction: row;

li {
position: relative;
z-index: 11;

div.dropdown-content {
display: none;
position: absolute;
background: rgba(#000000, 0.1);
backdrop-filter: blur(12px);

&.active {
display: flex;
flex-direction: column;
}
}
}
}
}
}

Видимо, фоновый фильтр: размытие(12px); не работает для моего содержимого div.dropdown, но для моего заголовка он работает нормально. Содержимое div.dropdown находится над остальным содержимым веб-страницы, как и должно быть. Моя структура html/php аналогична предоставленной мной вложенности scss.
раскрывающийся список без размытия фона, но панель навигации имеет размытие фона
Я также пробовал добавить высокий z-индекс для div.dropdown-content, но это тоже не сработало. Мой SCSS компилируется в мой CSS-файл так, как должен, и другие стили работают нормально, за исключением размытия. Может ли кто-нибудь мне помочь?

Подробнее здесь: https://stackoverflow.com/questions/785 ... g-properly