Root menu bar end image not showing

[Mugdha Aditya]

Hello,

i am using radmenu bar for which i have used telerik image with some color changes but after  last menu bar it is not showing vertical bar  which i want .

i have atteched scrren shot and image which i have used for the same.

its very urgent :(

Below is my css.

/* <RadMenu / Default> */

.RadMenu_RadMenuCss .rmRootGroup,
.RadMenu_RadMenuCss a.rmLink,
.RadMenu_RadMenuCss .rmGroup .rmText,
.RadMenu_RadMenuCss .rmVertical .rmText,
.RadMenu_RadMenuCss .rmLeftArrow,
.RadMenu_RadMenuCss .rmRightArrow,
.RadMenu_RadMenuCss .rmTopArrow,
.RadMenu_RadMenuCss .rmBottomArrow
{
    background-image: url('Menu/rmSprite.png');
    background-color: transparent;
}

.RadMenu_RadMenuCss .rmRootGroup
{
    background-repeat: repeat-x;
    background-position: 0 -408px;
    background-color: #e6e6e6;
}

/* <Root items> */

.RadMenu_RadMenuCss,
.RadMenu_RadMenuCss a.rmLink
{
    font-size: 14px;
    font-family :Calibri;
    font-style:normal;
    color:#fff;
    background-color:#dcdcdc;
    text-decoration: none;
}

.RadMenu_RadMenuCss a.rmLink
{
    background-position: 0 -72px;
}

.RadMenu_RadMenuCss .rmVertical .rmFirst,
.RadMenu_RadMenuCss .rmVertical .rmLast
{
    background: none;
}

.RadMenu_RadMenuCss a.rmLink:hover,
.RadMenu_RadMenuCss a.rmFocused,
.RadMenu_RadMenuCss a.rmSelected
{
    color : #dcdcdc !important;
    background-color: #dcdcdc !important;
}

.RadMenu_RadMenuCss .rmHorizontal .rmRootLink span.rmText
{
    display: inline;
    padding-left: 12px;
}

.RadMenu_RadMenuCss_rtl .rmRootLink span.rmText
{
    padding-right: 12px;
}

.RadMenu_RadMenuCss_Context_rtl .rmRootLink span.rmText
{
    padding-right: 28px;
}

.RadMenu_RadMenuCss .rmHorizontal a.rmRootLink
{
    padding-left: 0;
}

.RadMenu_RadMenuCss_rtl a.rmRootLink
{
    margin-left: 0;
    padding: 0;
}

.RadMenu_RadMenuCss .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */
{
    width: 100%;
}

.RadMenu_RadMenuCss ul.rmHorizontal .rmLeftImage
{
    margin: 4px -4px 0 6px;
}

.RadMenu_RadMenuCss_rtl ul.rmHorizontal .rmLeftImage
{
    margin: 4px 6px 0 -4px;
}

.RadMenu_RadMenuCss .rmVertical a.rmLink
{
    padding-top: 1px;
    padding-bottom: 1px;
}

.RadMenu_RadMenuCss .rmVertical a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical a.rmFocused,
.RadMenu_RadMenuCss .rmVertical a.rmSelected,
.RadMenu_RadMenuCss .rmVertical a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical a.rmExpanded:hover
{
    padding-top: 0;
    padding-bottom: 0;
}

.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmFocused,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmSelected,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded:hover
{
    padding-top: 1px;
    padding-bottom: 0;
    border-top-width: 0;
}

.RadMenu_RadMenuCss .rmVertical .rmLast a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmFocused,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmSelected,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded:hover
{
    padding-bottom: 1px;
    padding-top: 0;
    border-bottom-width: 0;
}

.RadMenu_RadMenuCss .rmVertical .rmItem a.rmDisabled:hover
{
    padding-top: 1px;
    padding-bottom: 1px;
    border-width: 0;
}

.RadMenu_RadMenuCss a.rmExpanded,
.RadMenu_RadMenuCss a.rmExpanded:hover
{
    background-color: #fff;
}


/* </Root items> */


/* <Submenu items> */

.RadMenu_RadMenuCss .rmGroup,
.RadMenu_RadMenuCss .rmMultiColumn,
.RadMenu_RadMenuCss .rmGroup .rmVertical
{
    background: #fff url('Menu/rmVSprite.png') repeat-y 0 0;
}

.RadMenu_RadMenuCss .rmTopFix,
.RadMenu_RadMenuCss .rmBottomFix,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #fff;
    background-repeat: repeat-y;
}

* html .rmRoundedCorners_RadMenuCss .rmGroup .rmItem,
* html .rmRoundedCorners_RadMenuCss ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #fff;
    background-repeat: repeat-y;
}

.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmVertical,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmVertical
{
    background-image: none;
}

* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmGroup,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmItem,
* html .rmRoundedCorners_RadMenuCss .rmHorizontal .rmItem,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmVertical
{
    background-image: none;
}

.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn
{
    background-color: #fff;
}

.RadMenu_RadMenuCss .rmBottomLeft,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners ul.rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners .rmMultiColumn
{
    background-image:  url('Menu/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer,
* html .rmRoundedCorners_RadMenuCss .rmGroup ul.rmGroup,
* html .rmRoundedCorners_RadMenuCss ul.rmGroup
{
    background-image:  url('Menu/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadMenu_RadMenuCss .rmTopRight,
.RadMenu_RadMenuCss .rmBottomRight
{
    background-image:  url('Menu/rmRoundedRight.png');
    background-color: transparent;
    background-repeat: no-repeat;
}


.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}

* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopFix,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}

.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}

* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmLeftArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}


.RadMenu_RadMenuCss_rtl li.rmTopFix,
.RadMenu_RadMenuCss_rtl li.rmBottomFix,
.RadMenu_RadMenuCss_rtl .rmRoundedCorners .rmGroup .rmItem,
.rmRoundedCorners.RadMenu_RadMenuCss_Context_rtl .rmGroup .rmItem
{
    background-position: 101% 0;
}

.RadMenu_RadMenuCss .rmSlide .rmScrollWrap
{
    background-image: none;
}

.RadMenu_RadMenuCss_rtl .rmGroup,
.RadMenu_RadMenuCss_rtl .rmMultiColumn,
.RadMenu_RadMenuCss_rtl .rmGroup .rmVertical
{
    background-position: 100% 0;
}

.RadMenu_RadMenuCss .rmRootGroup li.rmItem .rmGroup
{
    padding-bottom: 0;
}

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

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

.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.rmRoundedCorners_RadMenuCss .rmScrollWrapContainer li.rmItem
{
    background: none;
}

.RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink:hover,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmFocused,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmSelected,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmExpanded
{
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}



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

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

.RadMenu_RadMenuCss .rmGroup a.rmLink:hover .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmFocused .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmSelected .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmExpanded .rmText
{
    color : #28638f;
    background-position: 100% -192px;
}


/* </rtl> */

/* </Submenu items> */

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

.RadMenu_RadMenuCss .rmSlide
{
    margin: 0 0 0 -1px;
}

.RadMenu_RadMenuCss .rmVertical .rmSlide,
.RadMenu_RadMenuCss .rmSlide .rmSlide,
.RadMenu_RadMenuCss_Context .rmGroup .rmSlide
{
    margin: 0 0 0 -5px;
}

.RadMenu_RadMenuCss_rtl .rmSlide
{
    margin: 0 0 0 0;
}

.RadMenu_RadMenuCss_rtl .rmFirst .rmSlide
{
    margin-left: 1px;
}

.RadMenu_RadMenuCss_rtl .rmVertical .rmSlide,
.RadMenu_RadMenuCss_rtl .rmSlide .rmSlide,
.RadMenu_RadMenuCss_Context_rtl .rmGroup .rmSlide
{
    margin: 0 0 0 5px;
}


/* </Scrolling arrows> */

/* <Separators> */

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

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

/* </Separators> */

/* </RadMenu / Default> */


.RadMenu_RadMenuCss .rmVertical
{
    background-color:  #28638f;
}

 .RadMenu_RadMenuCss .rmGroup .rmItem .rmLink
{
    TEXT-ALIGN: left;
    LINE-HEIGHT: 22px;
    FONT-STYLE: normal;
    TEXT-INDENT: -21px;
    font-size: 13px;
    PADDING-LEFT: 2px;
    MARGIN-LEFT: 2px;
    PADDING-RIGHT: 1px;
    MARGIN-RIGHT: 1px;
    PADDING-BOTTOM: 1px;
    MARGIN-BOTTOM: 1px;
}

[Kate]

Hello Mugdha,

I looked at the sprite image that you apply to the RadMenu and it seems that whenever you apply a background position the separators will appear either on every left side or right side of the RadMenuItem. However, if you need to have a separator on both left and right side you will need to explicitly specify that by adding a RadMenuItem and set its IsSeparator property to true:

<telerik:RadMenuItem runat="server" IsSeparator="true">
</telerik:RadMenuItem>

Best wishes,
Kate
the Telerik team

[Mugdha Aditya]

thnks for your reply , but its not wroking :(

If i add ISSeperator="true" in all radmenuitem , it will disable all menuitem after debug