So I have a nav menu and when you hover over the different menus I want the background to dim out using a background overlay. I have it somewhat working but when you hover out over the top or straight to the right of the menus the overlay persists. I’m not quite sure why it doesn’t disappear in those two places?
So the Nav item can’t have the hover out because other wise the dropdown menu will close when you hover off of it which is why it’s on the nav item wrapper. I just don’t know where to put the interaction so that it works correctly.
So I think I figured it out. I wrapped the nav items within another wrapper and when you hover out of that wrapper I have the background overlay close.
I’m still getting a little bit of wonkiness with the menu’s not always closing when hovering off of them. It’s not huge but it would be nice it I could tighten that part up.
The only other thought I had is if you put your overlay inside your dropdown underneath the menu so that it will show whenever the menu is open but be set to fixed position with a z index lower than the menu. It should the auto show/hide with the dropdown without an interaction.
So I think the overlay part of it is working how I have it. I just noticed now that the menus don’t always close off hover if you move your mouse back and forth really fast across all of them. I don’t know if that’s due to how it’s setup or maybe that’s just as good as the code can get for interactions? You have to kind of move you mouse really fast across all the menus to replicate it so I don’t know if it would really be an issue for users or not? I was just hoping to tighten it up a little.
