Radmenu Child Item not displaying inside RadSplitter

[Ei Wai]

Hi ,

I tried to place my menu inside radsplitter. Everything worked fine if I don't put child menu items. But if I put child menu item, it don't appear even if I hover the mouse over parent item. Below is the code I use. I tried on chrome and mozilla. Both not working. Can anyone help me? And I put the below code inside masterpage. I am using telerik version 2014.1.403.40 

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="99.8%"
    Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="none" Height="50px">
        <telerik:RadMenu ID="settingMenu" runat="server" EnableEmbeddedSkins="false" Width="100%"
            EnableSelection="true" Skin="MySkin">
            <Items>
                <telerik:RadMenuItem runat="server" ImageUrl="~/Images/NEW.png" HoveredImageUrl="~/Images/NEW.png"
                   >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="User Account Settings">
                    <GroupSettings ExpandDirection="Down" />
                    <Items>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Acc.aspx" Text="Account">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="AccessRights.aspx" Text="Access Rights">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Modules.aspx" Text="Modules">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Plan" NavigateUrl="Schedule.aspx">
                </telerik:RadMenuItem>

            </Items>
        </telerik:RadMenu>
    </telerik:RadPane>
    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
        <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true" ResizeMode="EndPane"
            OnClientLoaded="SplitterLoaded">
            <telerik:RadPane ID="LeftPane" runat="server" Width="60" MinWidth="60" MaxWidth="60">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward"
                BackColor="Red" />
            <telerik:RadPane ID="ContentPane" runat="server" Width="80%" Scrolling="None">
                <telerik:RadSplitter ID="NestedSplitter2" runat="server" LiveResize="true" Orientation="Horizontal">
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="ContentPane2" runat="server" Scrolling="None">
                        <div id="quotescointainer1" class="quotescointainer">
                            <asp:Panel ID="pnlMain" runat="server">
                                <asp:ContentPlaceHolder ID="cphContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </asp:Panel>
                        </div>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>

Warmest regards,
Ei Wai

[Boyan Dimitrov]

Hello,

Please set overflow: visible to the parent element for the RadMenu control. In your case this will be the RadPane with id "RadPane1" that holds the RadMenu control. An easy way to solve this problem will be to apply a custom class to that RadPane and set its style as shown below:
//markup code

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="99.8%"
    Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="none" Height="50px" CssClass="customClass">
        <telerik:RadMenu ID="settingMenu" runat="server" EnableEmbeddedSkins="false" Width="100%"
            EnableSelection="true" >
            <Items>
                <telerik:RadMenuItem runat="server" ImageUrl="~/Images/NEW.png" HoveredImageUrl="~/Images/NEW.png"
                   >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="User Account Settings">
                    <GroupSettings ExpandDirection="Down" />
                    <Items>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Acc.aspx" Text="Account">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="AccessRights.aspx" Text="Access Rights">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Modules.aspx" Text="Modules">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Plan" NavigateUrl="Schedule.aspx">
                </telerik:RadMenuItem>

            </Items>
        </telerik:RadMenu>
    </telerik:RadPane>
    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
      ...........
    </telerik:RadPane>
</telerik:RadSplitter>

//css

.customClass {
    overflow:visible !important;
}

Regards,
Boyan Dimitrov
Telerik

 

 

[Ei Wai]

Thank you so much. That really do work.