#1. Set Row Overflow To Visible
The first thing you need to do is actually not in the Menu module, but rather in the row. I tried changing this for the module, column, and section, and it only works with the row. Go figure!
To do this, go to the Row Settings and the Advanced tab. In the Visibility toggle, change Horizontal Overflow and Vertical Overflow to “Visible.”
#2. Set Position To Relative
The next important step is to make sure the position of the row is set correctly. In the same row settings, find the Position toggle. This may or may not already be set correctly, but just make sure this is set to “Relative.”
Those two settings solved it for me! All my z-index settings are at default 0, so again, it’s not a z-index as many are claiming. But then again, whatever works! If that solves it for you, I’m more than happy to say there are more than one solution. I’d be curious to hear what works for you, so leave me a comment and let’s discuss this in The Divi Teacher Facebook group!
When All Else Fails…
The solution I gave above works in all cases that I have encountered except one very specific case. In our #1 popular child theme, Divi LMS for LearnDash, I have the course pages built with the Divi Theme Builder. For the life of me, I couldn’t get those specific layouts to work, the dropdown menu and mobile menu always went behind the Course template. So the only thing left to do was override it with some CSS.
If you find yourself in a similar situation, you can try placing the following code snippet in your Divi>Theme Options>Custom CSS box.