Submenus hidden in Internet Explorer with Filter Gradient

Diagnosis

Internet Explorer display problem · Submenus (dropdowns) not displaying · UberMenu

You can NOT use IE gradient filters on your menu bar. If you add an IE filter to your menu bar in order to create a gradient, IE will automatically treat that element as overflow:hidden, no matter what CSS settings you change. This effectively chops off the submenu and prevents it from displaying.

Details

Background

Microsoft Internet Explorer filters are evil. Since the death of older IE browsers, this has become less and less common, fortunately.

The Problem

If you add an IE filter to your menu bar in order to create a gradient, IE will automatically treat that element as overflow:hidden, no matter what CSS settings you change. This effectively chops off the submenu and prevents it from displaying.

Identifying the issue

Check your .ubermenu and .ubermenu-nav elements ( #megaMenu and #megaMenu ul.megaMenu in UberMenu 2), as well as any wrapper elements in your theme, for IE gradient filters.

UberMenu does not add IE gradient filters to the menu bar.

The Solution

Use a background image instead of a gradient filter in order to display gradients in IE. Better yet, don’t use gradients at all in older versions of IE, it’s just not worth it.