Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
CSS

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
.nav__sub-nav__btn.has-sub-nav:after
{
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.
.has-sub-nav:hover:after
{
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   
Twitter Facebook LinkedIn Email
 

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

Related Posts

CSS

Dynamic Contrast Layers with CSS Style Queries

Learn how to create contrasting layers with CSS style queries ensuring your UI is always the right contrast ratio.

Read Article
Web Components

CSS Container Queries in Web Components

Learn how to use CSS Container Queries in Web Components to create reusable and responsive UI.

Read Article
CSS

CSS Interaction Theming with Accent Color and Color Contrast

Learn how to leverage new and proposed CSS features to make various interaction theming easy and accessible across a variety of UI components.

Read Article