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.


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.

.w-dropdown-list.w--open {
 display: none;
.w-dropdown:hover .w-dropdown-list {
 display: block !important;

(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.