Can't make seamless hover to hover effects in a menu

Thanks for the reply. It's a good discussion but unfortunately, it doesn't answer my question. 

I am not really interested in nested components per se. In my case, I need every item in the menu to open the submenu on hover at the same time moving a column to the left (see mp4 attached). I could make for every item a separate component and make the state with submenu and without and trigger them on hover. But in my case, they wouldn't able to move other components to the left if they are separated. So apparently I need to use one element with multiply states.

What I did is selected a small object beneath the blue Item (see mp4 attached) and assign in the prototype tab a new state on hover. I would expect when the mouse is leaving this small area the state would switch to Default, but it doesn't! It switches only if the mouse is leaving the whole menu. So I am not against this being playing like hover-default-hover. I would just expect the default would be like a millisecond long. The problem that right now I need to enter the area of the menu, the mouse triggers on hover, leave the area of the menu entirely, then it switches to default and only then I can enter the area again for another hover effect. As you can imagine this doesn't look like a proper working menu.