Background
In CSS, the overflow property dictates whether content that overflows the bounds of an element will be displayed (overflow:visible) or not (overflow:hidden). When overflow is set to hidden, content will be cut off at the boundaries of the element (review the box model if you’re not familiar). This property also affects child elements of an element; that is, if div B is a child of div A (which has the property overflow:hidden), any content of div B that exceeds the bounds of div A will be cut off.
While there are specific legitimate uses for the overflow:hidden property, one way in which it is abused is as a clearfix hack, which can create layout issues. While this hack was once in vogue, it has been surpassed by much better clearfix solutions in the last several years.
The Problem
Like with almost all HTML menus, UberMenu’s submenus overflow its parent div (the menu bar). While UberMenu naturally sets its own overflow to visible to allow for this, it can’t control its parent divs (which are created and controlled by the theme). If a theme has set any ancestor of UberMenu to overflow:hidden, UberMenu’s submenus will be cut off at the extents of that ancestor element.
Identifying the issue
The easiest way to identify the problem is to check each of UberMenu’s ancestor divs for the overflow:hidden property. The quickest way to do this is to inspect UberMenu in a web inspector like Chrome Developer tools, locate the .ubermenu nav element (#megaMenu in UberMenu 2), then begin clicking each of its ancestors and checking the computed styles for overflow:hidden (specifically, overflow-y for horizontal menus, and overflow-x for vertical menus).
The Solution
Once you have identified the problematic element, find the style and selector that applies the overflow:hidden to it. Then write an appropriate style to override this style and set overflow:visible;. In some cases, you may need to add the !important flag. In the example above:
#theme-nav{
overflow:visible !important;
}
Note that this can also be an indication of residual styling, and the best solution may be to use Manual Integration to move the menu outside of the offending div.
You can refer to the guide for information on Adding Custom CSS