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

SETUP

  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)

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

PROBLEM
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.

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.

SHARE LINK
https://preview.webflow.com/preview/dropdown-in-nav-changing-buttons?utm_source=dropdown-in-nav-changing-buttons&preview=06927c66a0994f20b6bce34b1fa8e27b

PUBLISH LINK
https://dropdown-in-nav-changing-buttons.webflow.io/

drop%20down%20problem

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