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

Thank you very much. The menu is headed, but categories 2 levels do not have an arrow near the name. How can i do this?

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

Thank you so much!

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 @kr3t3n,

Could you send me the URL to your site so I’ll take a look into this?

Happy New Year!

Hi jarektheme, of course, it is here

Please add this style to Appearance → Customize → Additional CSS:

@media (min-width: 768px) {
    .menu>li.menu-item-has-children ul li > ul {
        top: -1px !important;
    }
}

Kind regards

• This reply was modified 6 years, 2 months ago by jarektheme.

Many thanks, Jarek! That solved it!