IE6,7 - secondary menu UI issue

[Antonin Jelinek]

Hello,

I have 2 instances of RAD Menu on a page: one main navigation line (with items sliding down on mouse over) and one submenu on left hand side of a page. However, these two controls are independent, only sharing same custom skin.

In IE6 and 7, items sliding from main menu are rendered under submenu (in terms of z-index), while IE 8 and FireFox is displaying this properly (i.e. main menu items are shown in front of submenu).

My guess is this is due to default z-index (7000) settings that RadMenu emits to it's enclosing div. However, even after spending several hours on setting various combination of z-index, I was not able to make it work properly under IE6 and 7.

Anyone tried to put two independent instances of RAD Menu on page and had similar issue in IE6 and 7?

Thanks,

Antonin

[Paul]

Hi Antonin,

Please set higher z-index to the first menu, i.e.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadMenu ID="RadMenu1" runat="server" Style="z-index: 8000">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 4">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 5">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    <br />
    <br />
    <telerik:RadMenu ID="RadMenu2" runat="server">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 4">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 5">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    </form>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.