Faking Hover Intent with CSS Transitions

I still think to this day that dropdowns largely suck, but there are certainly ways to make them suck less.  One of those ways is with the use of what is called “hover intent” based on a jQuery plugin by Brian Cherne, but this is only a viable option if you’re using client-side scripting to manage your menu.  What if you’ve chosen the pure CSS way of handling the dropdown?

On a recent project the menu was creating using solely CSS, and we wanted to find a way to make the menu not so sensitive in firing the dropdown. Obviously, CSS has nothing you can add to the :hover event for sensitivity (although as CSS unfortunately becomes more and more behavioral this may come someday) so we has to look elsewhere for a solution.

Well it turns out you can have delays in CSS they just needed to be associated with a CSS transition. So I decided to try this on the menu dropdown, and for the transitioned property I chose opacity. Below is some sample CSS that accomplishes this (I have removed some styles that will be in my later example for brevity).

li.children:hover ul {
opacity: 1;
}
ul ul {
opacity: 0;
-webkit-transition: opacity 100ms linear 700ms;
transition: opacity 100ms linear 700ms;
}

As you can see, I’m simply changing the opacity on hover from 0 to 1 and doing it with a 700ms delay. I also set the transition duration to 100ms, and both of these values can be adjusted to whatever you want.  You’ll also notice I used a prefix version of the transition for Webkit for Safari on desktop (mobile browsers obviously don’t understand “hover”). Opacity is also well supported.

The best part of this solution is that it degrades well (or I enhanced well whichever you want to use).  Below you can find the full demo.

See the Pen Faking Hover Intent by Chris Poteet (@cpoteet) on CodePen.0

UPDATE: My co-worker, Martin Machado, has written about an approach that adds a jQuery level on top of a CSS menu to add hover intent. Read the post: Faking Hover Intent with JavaScript.

UPDATE 2: Daniel wrote in to me and toggled visibility instead of opacity to avoid the positioning issue for sub items. See his solution on CodePen.