Archived topic
How to make Sub Menu in Mega Menu
5 replies · Started by SEO on October 26, 2021
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?
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 :)
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
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;
}
}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
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;
}
}