Dropdown On Hover

Design help Animations & Interactions
1

What is the best way to get the dropdown list to show on hover?

2

i.e. right now I can get it to show the dropdown on hover using interactions, but it will show all dropdowns with the same class. There doesn’t seem to be a way to limit it to the current dropdown hovered over

3

you can limit the interaction to only nest elements, if that’s what you’re looking for.

470Ă—1300 107 KB

1 Like
4

Thanks for the reply. I tried that with no luck.

I ended up going with:

  $(document).on('mouseover', '.w-dropdown.dropdown-hover', function(){
    $(this).find('.w-dropdown-list').show();
  });
  $(document).on('mouseout', '.w-dropdown.dropdown-hover', function(){
    $(this).find('.w-dropdown-list').hide();
  });

After the tags

5

On the following example I made two dropdown on Hover, 100% Webflow, they share the same classes and interaction.

PixelGeek advice works. In my case it’s limited to siblings, because my structure is like this. Maybe for you too.

Check it here : https://webflow.com/design/sab?preview=c8e9203ce4585987e1e74923be4eda13

6

@vincent the issue with your solution is you can’t select any of the dropdown options :smile:

9

I’ve updated it. of course we couldn’t click the links, because I stupidly said may Interaction to HIDE the drop down menu when HOVER OUT of the menu item. So I simply removed to HOVER OUT thing, and added a new interaction that hides the drop down menu when HOVER OUT of itself.

I gave a 50px padding to the drop down menu, then I translated it 50px upper (set to position:relative). I didn’t have to mess with the Z-index because the menu is already on top of the menu item. This is important because a hover property doesn’t work for an object hidden or partially hidden behind something else. So I removed the background color of the menu. Instead I gave a class to the links and gave them a background.

So now, when you hover the menu item, it shows the menu, and you’re already hovering it. when you move outside of it, it closes it.

http://sab.webflow.com/

Another issue ? :smiley:

10

I’m struggling with this. Mainly because when I select a drop down menu and hit open menu in the settings pain it keeps taking me to a mobile view. Anyone else having this issue? And yes, I’m hitting the open under dropdown. @vincent

11

Also, I see how you got the dropdown to work. And for me the hover works, but when I hover out on the main button the dropdown stays there. Any wise words on this issue? I’m sure there is something I am missing! @vincent

12

This is addressed just above your message.

Because the dropdown only closes when you hover off of it, you actual have to be ON it before you can hover OFF. Keeping the mouse on the menu items opens the dropdown, but doesn’t close them because you haven’t actually hovered OFF the menu.

Slipping the menu behind the toggle means that when you’re moused over the toggle, you’re also over the menu.

1 Like
13

can you share this again @vincent

14

It’s there and you have links to reach the cloning page Menu in DropDown Menu - My Sandbox

15

accessed the link, what I want is there, just not the webflow designer viewer version, that one is offline, can u send it @vincent

16

Links at the top go to the showcase page, then you get this

https://preview.webflow.com/preview/sab?preview=42fe664f1df0d6001bb84af6ed30f69f

Is that what you need?