Z-index issue with multiple menus

[Matthew Botting]

Hi Telerik,
We have a site menu containing subitems in our master page so it displays on all pages.
One quite a few pages we also use a 1 level horizontal menu to perform actions.

Since upgrading to 2013.2.717.40 we have been experiencing z-index issues where the child items of the top menu sit below the root level items of the second menu (see screenshot).

I have tried to override the .css particularly of rmSlide but have not found a solution.

Below is some sample code used to create the issue shown in the screenshot.

Do you have any suggestions?

Thanks,
Matt

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" EnableEmbeddedSkins="true" Skin="Default">

    <Items>

        <telerik:RadMenuItem Text="File" AccessKey="F">

            <Items>

                <telerik:RadMenuItem Text="New" AccessKey="w" />

                <telerik:RadMenuItem Text="Open" AccessKey="O" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Save" AccessKey="S" />

                <telerik:RadMenuItem Text="Save As" AccessKey="A" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Print Preview"
                    AccessKey="V" />

                <telerik:RadMenuItem Text="Print" AccessKey="P" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Close" AccessKey="C" />

            </Items>

        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Edit" AccessKey="E">

            <Items>

                <telerik:RadMenuItem Text="Undo" AccessKey="U" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Cut" AccessKey="T" />

                <telerik:RadMenuItem Text="Copy" AccessKey="C" />

                <telerik:RadMenuItem Text="Paste" AccessKey="P" />

                <telerik:RadMenuItem Text="Clipboard..."
                    AccessKey="b" />

                <telerik:RadMenuItem IsSeparator="True" />

            </Items>

        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Insert" AccessKey="I">

            <Items>

                <telerik:RadMenuItem Text="Break..." AccessKey="B" />

                <telerik:RadMenuItem Text="Page Numbers..." AccessKey="U" />

                <telerik:RadMenuItem Text="Date and Time..." AccessKey="T" />

                <telerik:RadMenuItem Text="Field..." AccessKey="F" />

                <telerik:RadMenuItem Text="Symbol..." AccessKey="S" />

                <telerik:RadMenuItem Text="Comment" AccessKey="M" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Picture" AccessKey="P" />

                <telerik:RadMenuItem Text="Diagram" AccessKey="G" />

                <telerik:RadMenuItem Text="Text Box" AccessKey="X" />

                <telerik:RadMenuItem Text="Hyperlink" AccessKey="I" />

            </Items>

        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Format" AccessKey="O">

            <Items>

                <telerik:RadMenuItem Text="Font" GroupSettings-Height="200">

                    <Items>

                        <telerik:RadMenuItem Text="Arial" />

                        <telerik:RadMenuItem Text="Verdana" />

                        <telerik:RadMenuItem Text="Tahoma" />

                        <telerik:RadMenuItem Text="Sans-serif" />

                        <telerik:RadMenuItem IsSeparator="true" />

                        <telerik:RadMenuItem Text="Arial" />

                        <telerik:RadMenuItem Text="Arial Black" />

                        <telerik:RadMenuItem Text="Arial Narrow" />

                        <telerik:RadMenuItem Text="Arial Unicode MS" />

                        <telerik:RadMenuItem Text="Bookman Old Style" />

                        <telerik:RadMenuItem Text="Bookshelf Symbol 7" />

                        <telerik:RadMenuItem Text="Century" />

                        <telerik:RadMenuItem Text="Century Gothic" />

                        <telerik:RadMenuItem Text="Comic Sans MS" />

                        <telerik:RadMenuItem Text="Courier New" />

                        <telerik:RadMenuItem Text="Garamond" />

                        <telerik:RadMenuItem Text="Georgia" />

                        <telerik:RadMenuItem Text="Goudy Old Style" />

                        <telerik:RadMenuItem Text="Goudy Stout" />

                        <telerik:RadMenuItem Text="Haettenschweiler" />

                        <telerik:RadMenuItem Text="Helvetica" />

                        <telerik:RadMenuItem Text="Impact" />

                        <telerik:RadMenuItem Text="Imprint MT Shadow" />

                        <telerik:RadMenuItem Text="Latha" />

                        <telerik:RadMenuItem Text="Lucida Console" />

                        <telerik:RadMenuItem Text="Lucida Sans" />

                        <telerik:RadMenuItem Text="Lucida Sans Typewriter" />

                        <telerik:RadMenuItem Text="Lucida Sans Unicode" />

                    </Items>

                </telerik:RadMenuItem>

                <telerik:RadMenuItem Text="Paragraph..." AccessKey="P" />

                <telerik:RadMenuItem Text="Bullets and Numbering..." AccessKey="N" />

                <telerik:RadMenuItem Text="Borders and Shading..." AccessKey="B" />

                <telerik:RadMenuItem IsSeparator="true" />

                <telerik:RadMenuItem Text="Columns" AccessKey="C" />

                <telerik:RadMenuItem Text="Tabs" AccessKey="T" />

                <telerik:RadMenuItem Text="Change Case" AccessKey="E" />

                <telerik:RadMenuItem IsSeparator="true" />

                <telerik:RadMenuItem Text="Background" AccessKey="g">

                    <Items>

                        <telerik:RadMenuItem>

                            <ItemTemplate>

                                <div style="padding: 20px 0 20px 20px;">

                                    <telerik:RadColorPicker runat="server" ID="RadColorPicker1" Preset="Metro" ShowEmptyColor="false"
                                        Width="200px" SelectedColor="#000000" />

                                </div>

                            </ItemTemplate>

                        </telerik:RadMenuItem>

                        <telerik:RadMenuItem IsSeparator="True" />

                        <telerik:RadMenuItem Text="More Colors..." AccessKey="M" />

                        <telerik:RadMenuItem Text="Fill Efects..." AccessKey="F" />

                        <telerik:RadMenuItem Text="Printed Watermark..."
                            AccessKey="W" />

                    </Items>

                </telerik:RadMenuItem>

                <telerik:RadMenuItem Text="Theme" AccessKey="H" />

                <telerik:RadMenuItem Text="Frames" AccessKey="R" />

                <telerik:RadMenuItem Text="Autoformat" AccessKey="A" />

            </Items>

        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="View" AccessKey="V">

            <Items>

                <telerik:RadMenuItem Text="Normal" AccessKey="N" />

                <telerik:RadMenuItem Text="Web Layout" AccessKey="W" />

                <telerik:RadMenuItem Text="Print Layout" AccessKey="P" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Task Pane" AccessKey="p" />

            </Items>

        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Tools" AccessKey="T">

            <Items>

                <telerik:RadMenuItem Text="Spelling And Grammar..." AccessKey="S" />

                <telerik:RadMenuItem Text="Research..." AccessKey="R" />

                <telerik:RadMenuItem Text="Language" AccessKey="L" />

                <telerik:RadMenuItem Text="Word Count..." AccessKey="W" />

                <telerik:RadMenuItem IsSeparator="True" />

                <telerik:RadMenuItem Text="Track Changes" AccessKey="T" />

                <telerik:RadMenuItem Text="Compare And Merge Documents.." AccessKey="D" />

            </Items>

        </telerik:RadMenuItem>

    </Items>

</telerik:RadMenu>

<br />
<br />
<br />
<telerik:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true" EnableEmbeddedSkins="true" Skin="Default">

    <Items>

        <telerik:RadMenuItem Text="Item1" AccessKey="1">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Item2" AccessKey="2">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Item3" AccessKey="3">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Item4" AccessKey="4">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Item5" AccessKey="5">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="Item6" AccessKey="6">
        </telerik:RadMenuItem>

    </Items>

</telerik:RadMenu>

[Princy]

Hi Matthew Botting,

Please set the following CSS for the second RadMenu.

ASPX:

<telerik:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true"
    EnableEmbeddedSkins="true" Skin="Default" CssClass="Radmenu2">
    <Items>
        <telerik:RadMenuItem Text="Item1" AccessKey="1">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item2" AccessKey="2">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item3" AccessKey="3">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item4" AccessKey="4">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item5" AccessKey="5">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item6" AccessKey="6">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

CSS:

<style type="text/css">
    .Radmenu2
    {
        z-index: 6000 !important;
    }
</style>

Thanks,
Princy.

[Matthew Botting]

Thanks Princy,
this does appear to do the trick.
I am still interested however if we can apply a style to just the dropdown component as this would not require us to manually apply cssclass attributes on the affected radmenus.

Strangely enough it used to work prior to upgrading to the latest release. I see this as a breaking change, obviously Telerik have altered something with the z-indexes in this release. I have also encountered zIndex issues with modal radWindows in this release.

Matt