Nested dropdown within a dropdown animation affecting multiple elements

Hi everyone,

I’m designing a website for my organisation and am fairly new to Webflow. So any feedback on my issue is welcomed with open arms.

In my navbar I have a “Services” dropdown but within this I also have an “NDIS Services” dropdown which expands when clicked. Now the appearing/disappearing of lists is complete and responsive but my issue is this: I’ve setup animations on the dropdown arrows to further enhance user experience but when clicking “NDIS Services” within the “Services” dropdown the arrow for “Services” moves as well as “NDIS Services” arrow.
Video link below of my issue also.

They use completely different class names and are different elements entirely.
I’ve tried in the animation having it affect their respective elements only, as well as only their class.
I’ve tried everything and am turning to the experts now, it may be something obviously simple to an expert but I cannot find why this cannot trigger independently.

My thanks guys,
Aaron

Here is my public share link: [LINK][1]

Here is the screen recording of the issue: blob:https://vimeo.com/a3feef4b-9cd8-4c64-86c2-38dae522069d