Better UX CSS Hover Navigation

Cory Rylan

- 2 minutes

The CSS hover based drop down nav has been a common option when organizing our website's navigation. Simple and easy to build with decent user experience the drop down can seem like reasonable choice. With a small bit of JavaScript we can also get good touch support. Often though when using hover effects to open drop downs users run into something like this:

The user saw the bottom link in the sub nav and tried to click it. Because our nav displays on hover, when the cursor leaves the element the hover is no longer applied. This in turn the causes our nav to no longer display. Using Pseudo-elements and CSS transforms we can create additional elements to allow the hover area to be larger. Doing this creates a buffer area that will allow the user's mouse to veer off of the menu. So we will have something like this:

CSS Hover Navigation

Below is a snippet example from our demo of how this would look.

// Don't worry to much about the details but just look and see how we are using
// the :after selector to create a new Pseudo-element.

// Sub nav that is displayed when a nav button is hovered
content: '';
display: none;
width: 68px;
height: 139px;
position: absolute;
right: -19px;
top: 4px;
transform: rotate(-41deg);
z-index: 99;

// On hover of our nav we show our Pseudo-element that we created above.
display: block;

// On hover of our extra Pseudo-element we show the sub nav
.has-sub-nav:after:hover > .nav__sub-nav
display: block;
top: 0;
left: 238px;
z-index: 100;

The extra element allows our hover state to continue while the user moves their mouse outside of the parent menu button. Using z-index we place our new element between the nav and the sub nav to get the final result:

This is not a perfect solution. There is still a chance of the users mouse venturing out too far but this does provide a better user experience with only a little more code. Check out a full working demo on Codepen below with included JavaScript for touch support.

View Demo Code   

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


CSS Tips Vertical Line Rule

Learn how to use CSS and Flexbox to make vertical line rules.

Read Article
Web Performance

Design System Performance with Clarity Core Web Components

Learn how to build high performance UI and Design Systems on the Web using Clarity Core.

Read Article
Web Components

State of Web Components in 2020

Learn a brief overview on Web Components and the latest tech available to build and distribute components across the Web.

Read Article