0

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:

Weird Menu Behavior

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>
1
  • If you use firefox and firebug you are able to select the menu with the inspector and in firebug choose the hover css classes. Take a screenshot of it and update your post so it is easier to help you.
    – Andreas
    Dec 7, 2015 at 7:44

1 Answer 1

0

Well, thanks to Chrome and it's Dev tools I was finally able to capture the shadow element and squash it. The flyout script is creating the shadow by dynamically inserting an iFrame(!) at the bottom of the document and absolutely positioning it relative to the body container (I think).

I don't know if this id is universal, but on my site it was "zz16_TopNavigationMenuV4_FrameID_1"

I added this to the bottom of my custom CSS file and now it is gone:

#zz16_TopNavigationMenuV4_FrameID_1 {
    display: none !important;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.