Trying to build a mega menu with two columns, encountered issues

Hi all,

I am trying to build a mega menu with two columns: when you mouse over an item in column 1 the item in column 2 should change. When no item is being hovered, the default content should be displayed.

Weird things are happening:

  1. the default item is showing up when moving the mouse from element 1 to element 2 for a very short period of time and there’s visible blinking.

  2. When there’s no gap between items that trigger the interaction, the interaction isn’t triggered.

Please help, spent two days on this :frowning:


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

Any ideas would be appreciated

Hey, @Bittabola. Can show on your design with menu states how it should looks?

Hey! The icon and the text should change according to which menu item you are hovering over. When no menu items is hovered, the default text and image should appear.

Right now, you can see that when you mouse over the main menu item, the Default State text appears on the right column and that changes when I mouse over to Integrated Platform.

The issue is that hovering over the other items doesn’t change anything. I have interactions set up for each item but that doesn’t work and I don’t understand why.

This is not standard situation, so 2 days for first try to do is a normal) The problem in conflict of Display “states” — now on each interaction its set as “Initial”.

For do that all works as needed need to know how should looks this menu on mobile. Maybe be it easier to create this menu using tabs + this script: Activate tab pane on tab Hover rather than click

1 Like

Thank you! I was able to solve the issue.