Solve The Diagonal Submenu Hover Problem Fix

# 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 woocommerce.menu-cart-holder and child item is .mini-cart
So, the code will be like this.

.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;
}

*** 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.