The submenu descends a bit further than its intended position

Question

Hey everyone, hope you had a fantastic New Year!

I've run into an issue with the CSS navigation menu submenu items on my WordPress site.

In the screenshot provided, you can see that the sub-submenu is not displaying correctly, causing usability issues for visitors.

You can view the live website here, and I'm struggling to pinpoint the problem in the CSS. Everything looks okay at first glance.

Could someone lend me a hand? What adjustments should I make to ensure the 3rd level menu items show up in the right place?

Thank you in advance for your assistance and time!

Answer 1

Answer №1

To ensure proper alignment of list items, it is recommended to eliminate the 'top: 100%' from the CSS class provided below:

`.menu>li.menu-item-has-children:hover ul {
    visibility: visible;
    opacity: 1;
    /* top: 100%; */
    z-index: 999;
}`

Answer 2

To ensure proper alignment of list items, it is recommended to eliminate the 'top: 100%' from the CSS class provided below:

`.menu>li.menu-item-has-children:hover ul {
    visibility: visible;
    opacity: 1;
    /* top: 100%; */
    z-index: 999;
}`

Answer 3

This was the solution that worked:

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

Answer 4

This was the solution that worked:

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