Hover over overlapping components

Hey there, 

I am wondering if there is a solution for my issue.

I'm creating a horizontal navigation menu, with hover applied on each option. 

This is the Default State of the first item:

And this is the Hover State or the same item:

Works great, no problems.

The same with the second item.

The issue that I'm having is that when I move from one item to the next, the hover state only activates for the item that is on top of the other one. So when I move the cursor from the first menu item to the second, it works but when I move back to the first it doesn't. That is because my second item is on top of the first, and the components overlap each other. 

This is the link to my prototype 

https://xd.adobe.com/view/86043e24-6201-4c90-9b28-c347bdba456a-d357/

Is there any way to fix this issue? It's not a huge deal with horizontal menus (since the cursor has to travel very little above the top of the menu to collapse it), but with vertical ones it would be impossible to get it to work nicely.

I've tried making one big component, but it still didn't work.

Thanks! 🙂