Background Blur for Navigation Dropdowns

Hi Webflow peeps,

I am having some issues with applying a backdrop blur to my Webflow site. So my solution was to use an animated div block that shows up when you click on the drop-down. Everything looked great till I tried to click between the different dropdowns. I ended up creating three div blocks and giving each drop-down its own blur div and animating it separately but now I am having issues with the animations 1st and 2nd click. If you click anywhere other than on the dropdown trigger it will not work. I think many visitors will not go back and click on the menu and will click anywhere on the screen to close a menu. Is there any way to make those div blocks close in sync with the drop-down menus? Really appreciate any help on this. Thank you!!!


Here is my site Read-Only:

https://preview.webflow.com/preview/joes-site-c098f9?utm_medium=preview_link&utm_source=designer&utm_content=joes-site-c098f9&preview=bfa43bf4c65609b944e16aa867799cdb&workflow=preview