How to All Dropdown Widgets Open on Hover

Webflow Dropdown widgets by default only opens/closes when you click on the element.
We are going to make all dropdowns open on hover only.

Dropdown
Dropdown
Dropdown
Dropdown
Dropdown
Dropdown
Dropdown

Method

We are going to be using CSS to override hover state.

Step 1:

Go to the site dashboard Custom Code section. In the field "Add code at the end of the <head> tag", paste this CSS code.

<style>
.w-dropdown-list.w--open {
 display: none;
}
.w-dropdown:hover .w-dropdown-list {
 display: block !important;
}
</style>

(To make this work for a single page only, you can also paste this code in an embed component, or paste this in the page settings field "Inside <head> tag".)

Step 2:

Publish your site to view it using the sub-domain. This does not work in the editor's Toggle Preview.

Notes: