Nested dropdown third level

[felicityevans]

I’ve followed this thread PRO - Header Builder - Nesting flyout menu in dropdown to create nested drop down menus on my site successfully, however when introducing the third level of page (something that my client has insisted on!) the dropdown down does not behave well and you can’t select the second item in the second first level.

I’d like the third level to remain collapsed until hovered over at the very least.

Can you please help?

[nabeel]

Hi @felicityevans,

Thank you for reaching out to us. As you see this requires custom CSS to make it work (custom CSS always create issues sooner or later and is outside of our support scope) and you’re changing the default behavior of the menu dropdowns forcefully, this will create problems and may never work as intended.

I’d highly recommend you to either use any other Navigation element or stick with the default behavior of your navigation element. However if you need a work around, you may use the following code:

.x-menu-inline .sub-menu .sub-menu .sub-menu {
    display: none !important;
}

.x-menu-inline .sub-menu .sub-menu li:hover > .sub-menu {
    display: block !important;
}

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

The above code may still not work as intended because it requires more than just CSS so I’d still recommend you to avoid the custom CSS and use native Navigation elements instead.

Hope this helps!

[felicityevans]

Thanks for your help. I’ve convinced my client to go back to the native side-by-side layout.

[tristup]

Hi @felicityevans,

Glad that you are able to convince your client to stick with the default one.

Thanks