I've got this strange issue when prototyping horizontal hover mega menu. I've got currently two menu items and they should display mega menu on hover. Strange thing is - it's working only when i move cursor out of component and go back - when i'm trying to hover one after another - nothing happens.
Here is the video: https://youtu.be/T9P0lyL3fgg
I was already trying by creating this with two approach like here - with seperated hover area inside component that leads to different state of same main component:
And in the second approach i've created two seperated components for every menu item that should go to it's own hover state:
Unfortunetly - both approaches works like in the video showed above. Which is strange - cause as far i understand that the second one can make the hovered component above another but in the first one - they are totally seperated areas.
UPDATE: I was trying different approaches but i still didn't found any solution for this problem. Right now i'm thinking of changing the shape of the component to something like this:
But the question is - if this is even possible?
Thanks