I am working on theming a Sharepoint 2010 site. In IE, the simple menu flyouts are rendering in a very glitchy manner. There is a white colored box that acts like a drop shadow. When you scroll the body area up behind the ribbon that shadow box get positioned in the wrong place. It's hard to explain but here's a screengrab:
Normally, I would inspect the element and attempt to use CSS to hide it but it's impossible to inspect in the devtools as it disappears when you move the mouse out of the flyout and towards it.
Is there a CSS class or other way to just make this unnecessary shadow element disappear?
Here's my menu code from the master page if that's any help:
<!-- top navigation area -->
<div class="s4-notdlg">
<!-- top navigation publishing data source -->
<PublishingNavigation:PortalSiteMapDataSource
ID="topSiteMap"
runat="server"
EnableViewState="false"
SiteMapProvider="GlobalNavigation"
StartFromCurrentNode="true"
StartingNodeOffset="0"
ShowStartingNode="false"
TrimNonCurrentTypes="Heading"/>
<!-- top navigation menu (set to use the new Simple Rendering) -->
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
EncodeTitle="false"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn">
</SharePoint:AspMenu>
</div>