How to darken background on dropdown hover

Site URL: https://saladcreative.com/

I would like to try and replicate the effect on the above website. When you hover over the dropdown on the top menu it darkens the rest of the page. I would like to do this so I don't have to place an ugly box around my drop down items for them to be visible. 

Can anyone help please, thanks in advance.

Can you share your site url? We can help easier

Of course no problem, it is www.thesignbridge.com

Following

On 1/6/2021 at 2:03 PM, TheSignBridge said:

Site URL: https://saladcreative.com/

I would like to try and replicate the effect on the above website. When you hover over the dropdown on the top menu it darkens the rest of the page. I would like to do this so I don't have to place an ugly box around my drop down items for them to be visible. 

Can anyone help please, thanks in advance.

@TheSignBridge I have been able to achieve this effect using this code. Hope it works for you.

.classname > div {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
}
.classname::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 0;
}

On 1/7/2021 at 9:23 PM, TheSignBridge said:

Of course no problem, it is www.thesignbridge.com

Sorry for the delay. This is very complex. Have you found the solution yet?

On 1/23/2021 at 11:08 AM, tuanphan said:

Sorry for the delay. This is very complex. Have you found the solution yet?

Hi Tuan, I'm afraid not. Struggling to find a solution to be honest. 

I suddenly remembered that I used to help a client with this. And you will need a script code (Business Plan).
I will try to find that code again