[Support request] How to make Sub Menu in Mega Menu

[SEO]

Hi, I used the mega menu using css under this tutorial it works fine now https://docs.generatepress.com/article/building-simple-mega-menu/ ,however I want another sub-menus on my sub-menus here is my staging site : https://andreab91.sg-host.com/

I want the test menu will be under to about us so the menu structure will be like this

Menu Structure:

but the CSS is broken how we can fix that?

[David]

Hi there,

not sure i fully understand… and the Simple Mega menu CSS was created for simple menus 🙂
But lets see – so the Test is the Sub Menu of the About menu item. Are you wanting it to display:

a) to the right of About
b) when About is hovered over

Let me know – but i am not sure how that can be done 🙂

[SEO]

Here’s what I want to happen under the about-us sub menu there would be another set of menus or I should call it sub-menu

The test sub-menu should only appear when the mouse hovers the about-us sub menu

[David]

If i understand correctly – try adding this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu > ul ul ul {
        position: static;
        display: block;
        margin-left: 50px;
        float: none;
    }
}

[SEO]

great, where almost there, but what I want to happen is the test sub-menu should only appear when the mouse hover the About-Us sub menu

[Ying]

Hi there,

Give this CSS a try:

@media (min-width: 769px) {
    nav .main-nav .mega-menu > ul >li> ul>li:hover> ul.sub-menu {
        position: static;
        display: block !important;
        margin-left: 50px;
        float: none;
        visibility: visible;
    }
    nav .main-nav .mega-menu > ul >li> ul>li>ul.sub-menu {
        visibility:hidden;
        display:none !important;
    }
}

[Author]

Posts