Hello everyone,
I’m experiencing an issue with the dropdown menu. I have a parent item (Item 4) and several child items nested beneath it (Item 4-1, 4-2, 4-3). I’ve applied an effect to close the child section using the ‘Only children with this class’ option, but the parent item is also affected when I do this.
In the screenshot, you can observe that both the parent item (Item 4) and its child items are displaying the ‘-’ (minus) sign icon. Ideally, only the child items should display this effect, leaving the parent item unaffected. Any suggestions on how to fix this?
Hi Mandy, after a bit of research and testing, I believe there is actually nothing wrong with your setup - instead, it is an issue with how Webflow’s ‘Dropdown Opens’ and ‘Dropdown Closes’ animations work. When you close the inner dropdown, it fires the dropdown open/close event for the parent dropdown.
Depending on how comfortable you are with custom interactions/animations, you could potentially replace the inner dropdown with some div blocks and build a dropdown interaction yourself. The custom ‘list’ would have an initial height of 0 and then change to auto when the custom ‘toggle’ is pressed. It would then go back to 0 when it’s pressed again. You would also need to make sure that as part of the main outer dropdown’s close animation, the inner list goes to a height of 0, so that it doesn’t remain open when you close the main dropdown.
Let me know if that makes sense, and if you need help with the inteeraction.
