Submenu

Hi there,

Thank you for getting in touch with us.

Please go to Appearance → Customize → Additional CSS and add the following css:

.menu>li.menu-item-has-children ul li > ul {
    display: none;
    right: auto;
    left: 100%;
    top: -1px;
}

.menu>li.menu-item-has-children:hover ul ul {
    display: none;
}

.menu>li.menu-item-has-children ul li:hover > ul {
    display: block;
}

Hope that helps.

Kind regards

Please replace all previous code with this:

@media (min-width: 768px) {
    .menu > li.menu-item-has-children > ul > li.menu-item-has-children:after {
        content: '';
        position: absolute;
        right: 10px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid #333;
        top: 15px;
    }

    .menu > li.menu-item-has-children > ul > li.menu-item-has-children:hover:after {
        border-left-color:#fff;
    }

    .menu>li.menu-item-has-children ul li > ul {
        display: none;
        right: auto;
        left: 100%;
        top: -1px;
    }

    .menu>li.menu-item-has-children:hover ul ul {
        display: none;
    }

    .menu>li.menu-item-has-children ul li:hover > ul {
        display: block;
    }
}

Kind regards

Hi and happy new year!

I am having the same problem. I also changed the depth attribute to ‘3’, then used the custom css you provided but now I’m having this problem: https://imgur.com/a/LNR5cJ9

As you can see, the submenu is appearing one level below and not where it is supposed to. It is now extremely difficult to move the mouse cursor to the column with the level 3 menu items before the menu collapses.

Can you please help me fix this?

Thank you very much in advance!

Hi jarektheme, of course, it is here

Many thanks, Jarek! That solved it!