I am using scss and inside my _header.scss file which I am using inside of my main.scss like this: @use “header”; i have the following code (I cut out some unimportant parts like borders, margins, paddings, font-size etc.):

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;
                    }
                }
            }
        }
    }
}

Apparently the backdrop-filter: blur(12px); does not work for my div.dropdown-content but for my header it is working just fine. The div.dropdown-content is above my other contents on the webpage as it should. My html / php structure is equal to the scss nesting I provided.

dropdown without background blur but navbar does have background blur

I also tried adding a high z-index to div.dropdown-content but it didn’t work either. My SCSS does compile to my css file as it should and other styles are working just fine, except for the blur. Can anyone maybe help me?