Display arrow if Menu Item has sub items

[Chris Edmonds]

My rad menu has various sub level and i want to display a arrow if the menu item has a sub menu item. I have edited the CSS but so far i am not being able to display the arrow .  Please advise

.RadMenu_White .rmRootGroup,
.RadMenu_White .rmLink,
.RadMenu_White .rmText,
.RadMenu_White .rmLeftArrow,
.RadMenu_White .rmRightArrow,
.RadMenu_White .rmTopArrow

.RadMenu_White rmVertical rmRootGroup, .RadMenu_White rmHorizontalRootGroup
{}

.submenus
{
    padding: 5px 30px 1px 15px;
    color: white;
}


.RadMenu_White .rmBottomArrow
{
    background-image: url('Menu/rmSprite.png');
    background-color: transparent;
}

.RadMenu_White .rmRootGroup
{
    border: 0px solid #828282;
    background-repeat: repeat-x;
    background-position: 0 -408px;
    background-color: Transparent;}

/* <Root items> */

.RadMenu_White
{
    font: normal 14px/23px Arial, sans-serif;
    color: black;
    text-decoration: none;

    padding-right:15px !important;
    padding-bottom:6px !important;


}
.RadMenu_White .rmLink
{
    font: normal 14px/23px Arial, sans-serif;
    color: black;
    text-decoration: none;

    padding-right:15px !important;
    padding-bottom:6px !important;
    border: solid 1px #d1d1d1;

}

.RadMenu_White .rmLink,
.RadMenu_White .rmDisabled,
.RadMenu_White .rmDisabled:hover
{
    background-position: 0 -72px;
}

.RadMenu_White .rmText,
.RadMenu_White .rmDisabled .rmText,
.RadMenu_White .rmFirst .rmLink,
.RadMenu_White .rmLast .rmText, rmText,
.RadMenu_White .rmLast .rmLink:hover .rmText,
.RadMenu_White .rmVertical .rmLink,
.RadMenu_White .rmVertical .rmText
{
    background-repeat: no-repeat;
    background-position: 0 500px;
    cursor: pointer;
}

.RadMenu_White .rmFirst .rmLink:hover, .RadMenu_White .rmLink:hover, .rmItem:hover
{
    cursor: pointer;
    background-color: #12630a;
    color: white;
}

.RadMenu_White .rmVertical .rmLink
{

}



.RadMenu_White .rmVertical .rmLink:hover,
.RadMenu_White .rmVertical .rmFocused,
.RadMenu_White .rmVertical .rmExpanded,
.RadMenu_White .rmVertical .rmExpanded:hover
{border-style: solid;
    border-color: #131b4c;
    border-width: 0px 0;
}

.RadMenu_White .rmVertical .rmFirst .rmLink:hover,
.RadMenu_White .rmVertical .rmFirst .rmFocused,
.RadMenu_White .rmVertical .rmFirst .rmExpanded,
.RadMenu_White .rmVertical .rmFirst .rmExpanded:hover
{border-top-width: 0;
}

.RadMenu_White .rmVertical .rmLast .rmLink:hover,
.RadMenu_White .rmVertical .rmLast .rmFocused,
.RadMenu_White .rmVertical .rmLast .rmExpanded,
.RadMenu_White .rmVertical .rmLast .rmExpanded:hover
{border-bottom-width: 0;
}

.RadMenu_White .rmVertical .rmItem .rmDisabled:hover
{border-width: 0;

}

.RadMenu_White .rmExpanded,
.RadMenu_White .rmExpanded:hover
{
background-color:#12630a;
    background-position: 0 -72px;

}

.RadMenu_White .rmExpanded .rmText,
.RadMenu_White .rmExpanded:hover .rmText
{
    background-position: 100% -96px;
}

.RadMenu_White .rmLast .rmExpanded .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
}

.RadMenu_White .rmDisabled,
.RadMenu_White .rmDisabled:hover
{
    color: #7d7d7d;
    background-color: transparent;
}

/* </Root items> */


/* <Submenu items> */

.RadMenu_White .rmGroup,
.RadMenu_White .rmGroup .rmVertical
{
    border: 0px solid #131b4c;
    /*background: transparent url('Menu/rmVSprite.png') repeat-y 0 0;*/


}

.RadMenu_White .rmSlide .rmScrollWrap
{
    background-image: none;
    background: transparent;

}

.RadMenu_White_rtl .rmGroup,
.RadMenu_White_rtl .rmGroup .rmVertical
{
    background-position: 100% 0;
    background: transparent;
    }

.RadMenu_White .rmRootGroup li.rmItem .rmGroup
{}

.RadMenu_White .rmRootGroup .rmHorizontal
{
    background-image: none;}

.RadMenu_White .rmScrollWrap .rmVertical
{border: 0;
}

.RadMenu_White .rmGroup .rmItem .rmLink,
.RadMenu_White .rmGroup .rmItem .rmLink:hover,
.RadMenu_White .rmGroup .rmItem .rmFocused,
.RadMenu_White .rmGroup .rmItem .rmExpanded
{border: 0;

}

.RadMenu_White .rmGroup .rmLast .rmLink,
.RadMenu_White .rmGroup .rmLast .rmLink:hover,
.RadMenu_White .rmGroup .rmLast .rmFocused,
.RadMenu_White .rmGroup .rmLast .rmExpanded
{}

.RadMenu_White .rmGroup .rmLink,
.RadMenu_White .rmGroup .rmText,
.RadMenu_White .rmGroup .rmItem .rmDisabled,
.RadMenu_White .rmGroup .rmItem .rmDisabled:hover,
.RadMenu_White .rmGroup .rmItem .rmDisabled .rmText,
.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
/*  background-color: transparent;*/
}

.RadMenu_White .rmGroup .rmLink:hover,
.RadMenu_White .rmGroup .rmFocused,
.RadMenu_White .rmGroup .rmExpanded
{
    background-position: 0 -168px;
}

.RadMenu_White .rmGroup .rmLink:hover .rmText,
.RadMenu_White .rmGroup .rmFocused .rmText,
.RadMenu_White .rmGroup .rmExpanded .rmText
{
    background-position: 100% -192px;
}

/* <expand arrows> */

.RadMenu_White .rmGroup .rmExpandRight,
.RadMenu_White .rmGroup .rmExpandDown,
.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandRight,
.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandDown,
.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,
.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandDown
{
    background-position: 100% -216px;

}
.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight
{
    background-image: url(images/arrow.png) no-repeat topright !important;
}



.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_White .rmGroup .rmFocused .rmExpandRight,
.RadMenu_White .rmGroup .rmExpanded .rmExpandRight,
.RadMenu_White .rmGroup .rmLink:hover .rmExpandDown,
.RadMenu_White .rmGroup .rmFocused .rmExpandDown,
.RadMenu_White .rmGroup .rmExpanded .rmExpandDown
{
    background-position: 100% -240px;
}



.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandRight,
.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandDown
{
    background-image: url('Menu/rmSprite.png');
    background-position: 100% -216px;

}

/* </expand arrows> */

/* <rtl> */

.RadMenu_White_rtl .rmLink
{
    background-position: 100% -96px;

}

.RadMenu_White_rtl .rmText
{
    background-position: 0 -72px;
}

.RadMenu_White_rtl .rmVertical .rmExpanded .rmText,
.RadMenu_White_rtl .rmVertical .rmExpanded:hover .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
}

.RadMenu_White_rtl .rmGroup .rmLink:hover,
.RadMenu_White_rtl .rmGroup .rmFocused,
.RadMenu_White_rtl .rmGroup .rmExpanded
{
    background-position: 100% -264px;
}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmText,
.RadMenu_White_rtl .rmGroup .rmFocused .rmText,
.RadMenu_White_rtl .rmGroup .rmExpanded .rmText
{
    background-position: 0 -288px;
}

.RadMenu_White_rtl .rmGroup .rmExpandLeft
{
    background-position: 0 -312px;
}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_White_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_White_rtl .rmGroup .rmExpanded .rmExpandLeft
{
    background-position: 0 -336px;
}

/* </rtl> */

/* </Submenu items> */

/* <Submenu offsets (Telerik - specific, overlapping submenus)> */

.RadMenu_White .rmSlide
{
    border-style:solid;
    border-color:#58b749;
    background:#58b749;
    border-width:0px;
    /*margin: 15px 5px 5px 15px;*/
    color:White;

}


.RadMenu_White .rmVertical .rmSlide,
.RadMenu_White .rmSlide .rmSlide,
.RadMenu_White_Context .rmGroup .rmSlide
{
    /*margin: 0 0 0 -0x;*/
}

.RadMenu_White_rtl .rmSlide
{
    /*margin: 0 0 0 0;*/
}

.RadMenu_White_rtl .rmFirst .rmSlide
{
    /*margin-left: 0px;*/
}

.RadMenu_White_rtl .rmVertical .rmSlide,
.RadMenu_White_rtl .rmSlide .rmSlide,
.RadMenu_White_Context_rtl .rmGroup .rmSlide
{
    /*margin: 0px 0px 0px 0px;*/
}

/* </Submenu offsets> */

/* <Scrolling arrows> */

.RadMenu_White .rmLeftArrow,
.RadMenu_White .rmRightArrow
{
    background-color: #E6E6E6;
}

.RadMenu_White .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }
.RadMenu_White .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

.RadMenu_White .rmTopArrow,
.RadMenu_White .rmBottomArrow,
.RadMenu_White .rmGroup .rmLeftArrow,
.RadMenu_White .rmGroup .rmRightArrow
{
    background-color: #E6E6E6;
}

.RadMenu_White .rmTopArrow { background-position: 50% -367px; border-bottom: 0px solid #828282; }
.RadMenu_White .rmBottomArrow { background-position: 50% -391px; border-top: 0px solid #828282; }

/* </Scrolling arrows> */

/* <Separators> */

.RadMenu_White .rmHorizontal .rmSeparator .rmText,
.RadMenu_White .rmVertical .rmHorizontal .rmSeparator .rmText
{
    height: 22px;width: 0px;
    background-color: #A8A8A8;
}

.RadMenu_White_Context .rmSeparator .rmText,
.RadMenu_White .rmHorizontal .rmGroup .rmSeparator .rmText,
.RadMenu_White .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
{
    background-color: transparent;
    background-position: 0 -406px;}

  .RadMenu_White .rmLeftImage, RadMenu RadMenu_White, rmItem rmFirst, rmHorizontal rmRootGroup, rmLink  rmExpanded, .rmLeftImage, .rmLink, .rmText rmExpandDown, .RadMenu .rmLink .rmText
{
    margin:0px 0px 0px 0px !Important;
    padding: 0px 0px 0px 0px !Important;
    float: none;

}
.RadMenu_White .rmItem
{
    background:transparent !important;
}

/* </Separators> */

/* </RadMenu / Telerik> */

[Kate]

Hi Chris,

Can you specify if you are using Vertical flow or a Horizontal flow of the RadMenu? A simple image of how the RadMenu should look like would also be helpful.

Best wishes,
Kate
the Telerik team