Fix the Diagonal Submenu Hover Problem With CSS

When the mouse moves diagonally from a menu item toward its dropdown, the pointer can leave the item before it reaches the dropdown. The hover ends and the submenu closes. A CSS fix is to give the hovered parent a transparent, absolutely positioned pseudo-element that covers the gap, so the pointer stays over the parent all the way to the dropdown.

The problem

For a detailed look at the problem, read How to solve the diagonal submenu hover problem on Medium.

How to fix it

1. Use position: relative on the parent (main menu) item.
2. Use position: absolute on the submenu (child) item.
3. Toggle submenu visibility on parent hover.

In this example, the parent is a WooCommerce header cart, .woocommerce.menu-cart-holder, and the child is its mini cart dropdown, .mini-cart. Add the CSS to your theme’s stylesheet:

.woocommerce.menu-cart-holder {
    position: relative;
}

.woocommerce.menu-cart-holder:hover:before {
    content: '';
    position: absolute;
    width: 600px;
    height: 300px;
    right: 0;
}

.menu-cart-holder:hover .mini-cart {
    position: absolute;
}

While the cart is hovered, the empty :before pseudo-element becomes a transparent box, 600 by 300 pixels, aligned to the cart’s right edge. The box belongs to the cart holder, so moving the pointer across it still counts as hovering the holder, and the mini cart stays open. Match its size to the gap between your menu item and its dropdown, and keep it no bigger than needed: while it’s there, it can sit over nearby header links and catch their clicks.

This is only the core CSS. Your theme still needs the rules that hide .mini-cart by default, show it on hover and style it. To build or change the mini cart itself, see customizing the WooCommerce header mini cart.

Related articles

• making a mobile menu’s parent item tappable: the touch-screen side of dropdown menu problems
• adding a dropdown arrow to WordPress menu items: show visitors which items open a submenu