Dropdown MegaMenu Animation


Ive designed the following mega menu. All the links appear via animations, however when the second dropdown show, as you can see in the pictures, and I go to hover over it, the entire menu fades out.

I know this is because I am not hovering over the 1st dropdown wrapper anymore, since it is connected to the menu header. However I would like to know if anyone knows how I can make the second dropdown work aswell via the animations.

I was thinking about setting it as a sibling element in the bottom of the 1st dropdown wrapper but It didnt work. There are going to be several second dropdowns under the other headers so I think that solution will be messy.

Please ask if I am unclear,

Here is my public share link: LINK
(how to access public share link)


Issue was with not having the second dropdown as a child element to the 1st dropdown