Streaming live at 10am (PST)

Problem changing icons on multi-level drop down

Can someone please help with this interaction problem I’m getting

The problem is the lower level menu drop downs are setting off the animations o the highest level - I want them to act independently

I’ve done my research on the videos and not seen this so far on any forum post


  1. I’m using multi-level drop downs on a nav bar burger menu.
  2. I want the icons on the drop down to change from + or - depending on if the dropdown is open or closed.
  3. I use interactions for this as well as icons (I hide the default arrow icon)

It works on the level 1 drop downs: the + and - icons show as I want.

As soon as I open a level 2 or lower drop down in the burger menu, the interactions start to fire on the LEVEL ABOVE.

So a level 2 dropdown fires the level 1 dropdown interaction.

I use a menu (open / close) interaction, and apply it to the class as a whole and specific parts of the interaction to the children of the same class.




Image shows clicking Level 2 or 3 Drop Down Links triggers interactions on Level 1 Drop Down Links ( opens or closes +/-)