Solve The Diagonal Submenu Hover Problem Fix

Share Now

# The Problem

Important Article to read:
How to solve the diagonal submenu hover problem

#How to fix:
1. Use position: relative on the parent/mainmenu item.
2. Use position: absolute on the submenu/child item.
3. Toggle submenu visibility on parent hover.

In this example our parent class/div/item is and child item is .mini-cart
So, the code will be like this. {
    position: relative;
} {
    content: '';
    position: absolute;
    width: 600px;
    height: 300px;
    right: 0;

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

*** This is the main CSS. You should add other necessary CSS on these items according to your needs.

# After Fix this is how it will look like.

Picture of Nahid Mahamud

Nahid Mahamud

Web Developer | Graphic Designer | WordPress & Woo-commerce Expert