Dropdown not appearing correctly on hover

Design help Animations & Interactions
1

Hi everyone,

I spent some time following some of the walkthroughs here in the forums to get my dropdown menu to appear on hover, not just when the down carrot is clicked. I finally got things working. I then set to work designing the open dropdown as I wanted it to.

Now I have two different dropdowns showing up:

Could anyone help me get the hovered version to look like the clicked version?

Here is the published link: http://kellyallen.webflow.com/
Here is the public link: https://webflow.com/design/kellyallen?preview=da36a6fe2014745f7095ce8a95510878

Thank you for your help!

2

Too many interactions.

  1. Remove all interactions to the dropdown
  2. Select “Dropdown Toggle” element
  3. Apply this interaction:
    Trigger: Hover
    Check “Affect different element” and write “Dropdown List”
    Hover Over Display:Block 0ms
    Hover Out Display:None 0ms
  4. Select “Dropdown list”
  5. Apply this interaction:
    Trigger: Hover
    Hover Over Display:Block 0ms
    Hover Out Dsiplay: None 0ms

That should do it. Now just style the dropdown list however you want and you are golden :smile:

Cheers

3

Makloon, thanks for your awesome help! Will try this out.

4

Awesome! That works perfectly. Thanks so much for your help.

5

I’m really impressed with Webflow but I’m floored that it does not support drop downs on hover. I’ve looked at the many forum posts on how to get it to work and it can be accomplished but the drop down list looses all styling. Although it makes sense for down downs to work via click on tablets, hover is the standard on desktops since you always want to minimize clicks for usability.

Although @aptdesign said he got it to work, the published link does not work (also checked the live site). Same with the samples provided by @vincent here: http://sab.webflow.com/ The drop downs are not styled. I created a basic sample site with the correct interactions: https://webflow.com/design/mc-test-1?preview=2347667dbeb960595f26be2f3156e873.

The drop down list has a red background and black border but all styling is lost when previewed.

6

Because hover on dropdown is a hack of the dropdown widget, it behaves differently.

http://vincent.polenordstudio.fr/snap//Webflow_-_MC_Test_1_2015-02-26_10-26-34.jpg

You have styled the dropdown by pening it with the setting tab, which gives it the Open class. But the interactions you set never give them the Open class when it opens it. So you need to style the Dropdown List element, not the dropdown-list.open element.

Select thr Dropdown List in the Navigator and pass it to display block, then style it.

http://vincent.polenordstudio.fr/snap//Webflow_-_MC_Test_1_2015-02-26_10-30-05.jpg

That said:

Isn’t true, and thanks god hover isn’t a standard. It’s pretty much to avoid for accessibility. The problem 'what should a click on an hover menu do?" is almost unsolvable. Close the menu? Browse a category page? (that you’re supposed to have for accessibility/seo) Do nothing? Activate the Open property? (as your example does now)