Prevent mega-menu drop down from collapsing immediately

Divis menu looks awesome and especially the mega-menu is one of our favorites – thats the one we are using on this page. However, it sometimes can get really annoying and frustrating because the menu is hidden immediately if the mouse is not hovering over the menu entry anymore. This forces uses to use a rather unnatural mouse movement sometimes. This picture illustrates that:

If you try to move the mouse diagonally, it will cause the menu to disappear. Instead you first have to move the mouse down and then, once you are in the drop-down, you can go sideways. We colored the menu links background to grey to show you the actual area of the menu item which will trigger the drop-down menu to be visible. Once the mouse is outside of that area, the drop-down is collapsed.

So what can we do prevent this behavior? The answer is quiet simple and involves just a few lines of CSS. Simply go to your Divi Theme Options page and add the following code to your custom CSS:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/* Make Mega-Menu not disappear immediately */

@media (min-width: 981px) {

.et-dropdown-removing > ul {

display:block!important;

}

.et-dropdown-removing > ul ul {

display:block!important;

}

#top-menu li.mega-menu:hover li ul {

visibility:visible;

opacity:1;

}

#top-menu li.mega-menu li ul {

display:block;

visibility:hidden;

opacity:0;

}

.nav li ul {

transition:all0.5s0.2sease-out!important;

}

}

First we make sure to only apply this CSS to the desktop size of our page since everything below 980px width will cause the mobile menu to show up anyways. We do this by using a media query with a min-width of 981px.

Then we make sure to always display the sub-menus. By default, the mega menu makes them invisible by adding “.et-dropdown-removing” class via JavaScript to the top level menu item when leaving the link (the grey area from the picture). This will then cause the drop-down to be hidden immediately. But not only that, the mega-menu has some weird CSS settings which causes the first level children to be visible but their submenus to be hidden. Thats because there is a JavaScripts which adds a “.et-hover” class instead of using the CSS “:hover” pseudo element. You can check what we mean by using the element inspector of your browser to force a hover effect on the parent menu item. Strange, isn’t it?

Anyways, that is fixed by making the sub-menus display as block and then just making them invisible when not hovering. Finally, we apply a transition to the drop-down. This will allow the user to move the mouse diagonally without the drop-down collapsing instantly.

By the way, this does not only work for the mega-menu but also for the normal drop-down menu. We hope this cool little trick helps you improve your Divi page. Cheers

We use cookies to ensure that we give you the best experience by analysing usage and traffic on our page. If you want to learn more about how we use cookies or if you want to revoke the usage of analytic programs, please visit our privacy policy.Accept!