Dropdown sub item hover won't work properly

Hi all,

I have made a navigation menu (left side) with a main item, which is a drop down. The main item drop down has 6 sub items under it.

The main category and sub items have 3 component states:

  1. Default
  2. Hover
  3. Select

When the main item is unfolded (state 3: select) you can see the 6 sub items under the main category.
I have made 6 different component sets for all the sub items as the sub items have an arrow in front of them (from the main category down to the sub item) when selected.

With every sub item (1 to 6) the hover state will work correctly except for sub item 3. I can’t seem to find why this item won’t show the hover state as it should. I have tried to copy the working items, changing only the arrow so it’s the correct size but this won’t solve the problem.

The hover state text is white with a dark grey background but when hovering the 3rd item the text suddenly becomes darker/seems to have a lower opacity.

I have another drop down which is exactly the same but only has 3 sub items which does work properly, also the 3rd item which is giving me problems in the one i’m talking about.

Also, when i test the drop down (prototype) on one of my pages with the whole navigation menu i can change the main item (with 6 sub items) to state 3: selected. But, if i make a separate frame and only put the main category drop down in there it will not change to state 3: selected.

The drop down with 3 items does work when i make a separate frame (so not on one of my pages).

I have double checked every possible setting multiple times but it is the same as all the other sub items and the other drop down with 3 items. So with one drop down the item does work properly but with the other it doesn’t. I have spend hours trying to fix this but i just can’t seem to find the problem.

Any advice would be appreciated!

Kind regards

Here is a screenshot of the navigation menu item

@Annieck Saw that you filed a ticket with our support team regarding this. Someone should be reaching out to you via email!

I’m also having the same issue with my prototypes. Can someone please tell me the solution for this issue. Dropdown hover over states are not working.

Hey there! After checking internally, Annieck has solved the issue.

Here’s the response:
" The item (item 3) did not update on one of the drop downs when I had made changes, so I had to do it manually.
On one of the dropdowns it did automatically change it so that is where it went wrong I’m assuming.

Also the default state text was on 75% opacity, the hover was full white. When I was presenting item 3 did show the 75% opacity, but the others didn’t.
I have put all the default state text on full white as well and now the problem seems to be solved. "

Hope this clarifies on your end. Otherwise, I’d recommend you to reach out to the support team, as your issue may be different: https://help.figma.com/hc/en-us/requests/new

Please use your Figma account email, include a link to the file, and share it with support-share@figma.com as an Editor, a quick video recording if you are able to, so they can take a closer look.
I’ve gone ahead and closed the thread here as the topic is solved here. :slight_smile: