[Solved] Sub menu not showing

[Clarence]

I have a menu with a sub menu, that has an item with another sub menu.

The last sub menu won't show.  Any help would be appreciated.  Here is the aspx and css code:

<telerik:RadMenuItem NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" CssClass="menuSpeedOrdering">
                        <Items>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" GroupSettings-ExpandDirection="Up" GroupSettings-OffsetX="100" GroupSettings-Width="200">
                                <Items>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" ></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>

/* RadMenu Telerik Skin */
/* Text color size and style of whole menu*/


/*Entire menu*/
div.RadMenu_Shade ul.rmHorizontal
{
    border: 0px solid #262626;
    float: left;
    padding: 0;
    width: 795px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    /*background: transparent url('../images/menu/light.gif');*/
}
/* Normal Item */
.rmHorizontal .rmItem
{
    width: 112px;
    height: 37px;
    /*background: transparent url('../images/menu/light.gif');*/
}

.rmHorizontal .rmItem .menuSpeedOrdering
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu1.gif') no-repeat 0 0;
}
.rmHorizontal .menuSpeedOrdering:hover, .rmHorizontal .menuSpeedOrdering:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu1a.gif') no-repeat 0 0;
}

.rmHorizontal .rmItem .menuCatalogBrowse
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu2.gif') no-repeat 0 0;
}
.rmHorizontal .menuCatalogBrowse:hover, .rmHorizontal .menuCatalogBrowse:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu2a.gif') no-repeat 0 0;
}

.rmHorizontal .rmItem .menuProductFinder
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu3.gif') no-repeat 0 0;
}
.rmHorizontal .menuProductFinder:hover, .rmHorizontal .menuProductFinder:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu3a.gif') no-repeat 0 0;
}
.rmHorizontal .rmItem .menuTrackOrders
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu4.gif') no-repeat 0 0;
}
.rmHorizontal .menuTrackOrders:hover, .rmHorizontal .menuTrackOrders:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu4a.gif') no-repeat 0 0;
}

.rmHorizontal .rmItem .menuAdminUsers
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu5.gif') no-repeat 0 0;
}
.rmHorizontal .menuAdminUsers:hover, .rmHorizontal .menuAdminUsers:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu5a.gif') no-repeat 0 0;
}

.rmHorizontal .rmItem .menuCompanyInfo
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu6.gif') no-repeat 0 0;
}
.rmHorizontal .menuCompanyInfo:hover, .rmHorizontal .menuCompanyInfo:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu6a.gif') no-repeat 0 0;
}

.rmHorizontal .rmItem .menuCustService
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu7.gif') no-repeat 0 0;
}
.rmHorizontal .menuCustService:hover, .rmHorizontal .rmItem .menuCustService  .menuCustService:active
{
    width: 112px;
    height: 37px;
    background: transparent url('../images/menu/btn_menu7a.gif') no-repeat 0 0;
}

.rmHorizontal .rmLink:hover,
.rmHorizontal .rmFocused,
.rmHorizontal .rmExpanded
{
    width: 112px;
    height: 37px;
}

.rmHorizontal .rmText
{
    padding: 8px 24px 8px 14px;
}

ul.rmVertical
{
    border: 1px solid #808080;
    float: left;
    background: url('../images/menu/dropdowndot.gif') repeat;
}

.rmVertical .rmItem
{
       height: 20px;
       overflow:hidden;
       padding-bottom: 4px;
}
.rmVertical .rmLink
{
   height: 20px;
       overflow:hidden;
       padding-bottom: 4px;
}

.rmVertical .rmText
{
    height: 20px;
       overflow:hidden;
    padding-bottom: 4px;
}

.rmVertical .rmExpandRight
{
}

.rmVertical .rmLink:hover,
.rmVertical .rmFocused,
.rmVertical .rmExpanded
{
    color: white;
    background: url('../images/menu/dropdowndotdark.gif') repeat;
    height: 20px;
       overflow:hidden;
}

.rmVertical .rmLink:hover .rmText,
.rmVertical .rmFocused .rmText,
.rmVertical .rmExpanded .rmText
{
   height: 20px;
       overflow:hidden;
}

.rmVertical .rmLink:hover .rmExpandRight,
.rmVertical .rmFocused .rmExpandRight,
.rmVertical .rmExpanded .rmExpandRight
{
   height: 20px;
       overflow:hidden;
}

.rmVertical .rmGroup
{
   height: 20px;
       overflow:hidden;
}

.rmVertical .rmGroup .rmLink
{
   height: 20px;
       overflow:hidden;
}

.rmVertical .rmGroup .rmText
{
   height: 20px;
       overflow:hidden;
}

.rmVertical .rmGroup .rmLink:hover,
.rmVertical .rmGroup .rmFocused,
.rmVertical .rmGroup .rmExpanded
{
   height: 20px;
       overflow:hidden;
}

 .rmVertical .rmGroup .rmLink:hover .rmText,
 .rmVertical .rmGroup .rmFocused .rmText,
 .rmVertical .rmGroup .rmExpanded .rmText
{
   height: 20px;
       overflow:hidden;
}

 .rmVertical .rmGroup .rmLink:hover .rmExpandRight,
 .rmVertical .rmGroup .rmFocused .rmExpandRight,
 .rmVertical .rmGroup .rmExpanded .rmExpandRight
{
   height: 20px;
       overflow:hidden;
}

 .rmSeparator
{
}

 .rmSeparator .rmText
{
}

 .rmTopArrowDisabled,
 .rmBottomArrowDisabled,
 .rmLeftArrowDisabled,
 .rmRightArrowDisabled
{
    display: none;
}

 .rmTopArrow,
 .rmBottomArrow,
 .rmLeftArrow,
 .rmRightArrow
{
    font-size: 0;
    color: #fff;
    line-height: 0;
}

 .rmTopArrow,
 .rmBottomArrow
{
    height: 10px;
    width: 100%;
}

 .rmBottomArrow
{
    background-position: center -18px;
}

 .rmLeftArrow,
 .rmRightArrow
{
    width: 10px;
    height: 100%;
}

 .rmRightArrow
{
    background-position: -18px center;
}

[Yana]

Hello Clarence,

Please remove "overflow: hidden" from the following style to fix this issue:

.rmVertical .rmItem
{
height: 20px;
/* overflow:hidden; */
padding-bottom: 4px;
}

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Clarence]

Great!  Thanks.  One more question, how would I add another level?  What is missing or could be changed in the css to to have yet another level of sub menus.

[Yana]

Hi Clarence,

I'm glad I could help.

You don't need to change anything in the css file to have another level. It can be added like this:

<telerik:RadMenuItem NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" CssClass="menuSpeedOrdering" Text="item 3">
                        <Items>
                            <telerik:RadMenuItem Text="TEST" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" GroupSettings-ExpandDirection="Up" GroupSettings-OffsetX="100" GroupSettings-Width="200">
                                <Items>
                                    <telerik:RadMenuItem Text="TEST2" NavigateUrl="~/orders/speedorder.aspx" ToolTip="Employee" >
                                        <Items>
                                            <telerik:RadMenuItem Text="TEST3" />
                                            <telerik:RadMenuItem Text="TEST3" />
                                        </Items>
                                    </telerik:RadMenuItem>
                                   ...

Kind regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Clarence]

I figured it out.  My .rmVertical .rmGroup also had a overflow:hidden;.  So once I removed that, it worked.