Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > how to change the selected RadMenu background color

Not answered how to change the selected RadMenu background color

Feed from this thread
  • Alice Leong avatar

    Posted on May 21, 2010 (permalink)

    Hi there,

    This is my first using on Telerik control and also the style builder.
    please refer to my attached image file, after I clicked/selected a menu from RadMenu control, the background became white color.
    May i know how to change this?
    i've searched through and played around the style builder, but the white background still there right after i clicked on it.
    please help.

    thanks.
    Attached files

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on May 26, 2010 (permalink)

    Hi Alice,

    Can you send the broken skin along with any images? Thank you in advance.

    Best wishes,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

    Reply

  • Alice Leong avatar

    Posted on Jun 1, 2010 (permalink)

    Hi Kamen,

    I'm trying to attach the MenuDefault.rar file.
    But it doesn't allow me to do so.

    I didn't use any image.
    All I did was removed the images and change the colors.

    Sorry for late reply.

    Thanks.

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Jun 1, 2010 (permalink)

    Hello Alice,

    You can only attach images in our forums. If you don't use any, you can just post the contents of your CSS as a formatted block.

    Best wishes,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

    Reply

  • Alice Leong avatar

    Posted on Jun 1, 2010 (permalink)

    Hi Kamen,

    Below is my RadMenu CSS code.

    /* <RadMenu / Telerik> */ 
     
    .RadMenu_MenuDefault .rmRootGroup, 
    .RadMenu_MenuDefault a.rmLink, 
    .RadMenu_MenuDefault .rmGroup .rmText, 
    .RadMenu_MenuDefault .rmLeftArrow, 
    .RadMenu_MenuDefault .rmRightArrow, 
    .RadMenu_MenuDefault .rmTopArrow, 
    .RadMenu_MenuDefault .rmBottomArrow 
    { 
        background-image: url('Menu/rmSprite.png'); 
        background-color: transparent; 
    } 
     
    .RadMenu_MenuDefault .rmRootGroup 
    { 
        border: 1px solid #828282; 
        background-repeat: repeat-x; 
        background-position: 0 -408px; 
        background-color: #e6e6e6; 
    } 
     
    /* <Root items> */ 
     
    .RadMenu_MenuDefault, 
    .RadMenu_MenuDefault a.rmLink 
    { 
        font: normal 12px/23px "Segoe UI", Arial, sans-serif; 
        color: #000000; 
        text-decoration: none; 
    } 
     
    .RadMenu_MenuDefault a.rmLink, 
    .RadMenu_MenuDefault a.rmDisabled, 
    .RadMenu_MenuDefault a.rmDisabled:hover 
    { 
        background-position: 0 -72px; 
    } 
     
    .RadMenu_MenuDefault .rmFirst a.rmLink, 
    .RadMenu_MenuDefault .rmFirst a.rmLink:hover, 
    .RadMenu_MenuDefault .rmLast .rmText, 
    .RadMenu_MenuDefault .rmLast a.rmLink:hover .rmText, 
    .RadMenu_MenuDefault .rmVertical a.rmLink, 
    .RadMenu_MenuDefault .rmVertical .rmText 
    { 
        background-repeat: no-repeat; 
        background-position: 0 500px; 
    } 
     
    .RadMenu_MenuDefault .rmVertical .rmFirst, 
    .RadMenu_MenuDefault .rmVertical .rmLast 
    { 
        background: none; 
    } 
     
    .RadMenu_MenuDefault a.rmLink:hover, 
    .RadMenu_MenuDefault a.rmFocused, 
    .RadMenu_MenuDefault a.rmSelected 
    { 
        background-color: #ffffff; 
    } 
     
    .RadMenu_MenuDefault .rmHorizontal .rmRootLink span.rmText 
    { 
        display: inline; 
        padding-left: 12px; 
    } 
     
    .RadMenu_MenuDefault .rmHorizontal a.rmRootLink 
    { 
     
        padding-left: 0; 
    } 
     
    .RadMenu_MenuDefault .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */ 
    { 
        width: 100%; 
    } 
     
    .RadMenu_MenuDefault .rmHorizontal img.rmLeftImage 
    { 
        margin: 4px -4px 0 6px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmHorizontal img.rmLeftImage 
    { 
        margin: 4px 6px 0 -4px; 
    } 
     
    .RadMenu_MenuDefault .rmVertical a.rmLink 
    { 
        padding-top: 1px; 
        padding-bottom: 1px; 
    } 
     
    .RadMenu_MenuDefault .rmVertical a.rmLink:hover, 
    .RadMenu_MenuDefault .rmVertical a.rmFocused, 
    .RadMenu_MenuDefault .rmVertical a.rmSelected, 
    .RadMenu_MenuDefault .rmVertical a.rmExpanded, 
    .RadMenu_MenuDefault .rmVertical a.rmExpanded:hover 
    { 
        padding-top: 0; 
        padding-bottom: 0; 
        border-style: solid; 
        border-color: #828282; 
        border-width: 1px 0; 
    } 
     
    .RadMenu_MenuDefault .rmVertical .rmFirst a.rmLink:hover, 
    .RadMenu_MenuDefault .rmVertical .rmFirst a.rmFocused, 
    .RadMenu_MenuDefault .rmVertical .rmFirst a.rmSelected, 
    .RadMenu_MenuDefault .rmVertical .rmFirst a.rmExpanded, 
    .RadMenu_MenuDefault .rmVertical .rmFirst a.rmExpanded:hover 
    { 
        padding-top: 1px; 
        padding-bottom: 0; 
        border-top-width: 0; 
    } 
     
    .RadMenu_MenuDefault .rmVertical .rmLast a.rmLink:hover, 
    .RadMenu_MenuDefault .rmVertical .rmLast a.rmFocused, 
    .RadMenu_MenuDefault .rmVertical .rmLast a.rmSelected, 
    .RadMenu_MenuDefault .rmVertical .rmLast a.rmExpanded, 
    .RadMenu_MenuDefault .rmVertical .rmLast a.rmExpanded:hover 
    { 
        padding-bottom: 1px; 
        padding-top: 0; 
        border-bottom-width: 0; 
    } 
     
    .RadMenu_MenuDefault .rmVertical .rmItem a.rmDisabled:hover 
    { 
        padding-top: 1px; 
        padding-bottom: 1px; 
        border-width: 0; 
    } 
     
    .RadMenu_MenuDefault a.rmExpanded, 
    .RadMenu_MenuDefault a.rmExpanded:hover 
    { 
        background-color: #ffffff; 
    } 
     
    .RadMenu_MenuDefault a.rmDisabled, 
    .RadMenu_MenuDefault a.rmDisabled:hover 
    { 
        color: #7d7d7d; 
        background-color: transparent; 
    } 
     
    /* </Root items> */ 
     
     
    /* <Submenu items> */ 
     
    .RadMenu_MenuDefault .rmGroup, 
    .RadMenu_MenuDefault .rmMultiColumn, 
    .RadMenu_MenuDefault .rmGroup .rmVertical 
    { 
        border: 1px solid #969696; 
        background: #ffffff url('Menu/rmVSprite.png') repeat-y 0 0; 
    } 
     
    .RadMenu_MenuDefault .rmTopFix, 
    .RadMenu_MenuDefault .rmBottomFix, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmGroup .rmItem, 
    .RadMenu_MenuDefault .rmRoundedCorners li.rmFirstGroupColumn .rmItem, 
    .RadMenu_MenuDefault .rmRoundedCorners ul.rmHorizontal .rmFirst, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmGroup .rmItem, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners ul.rmHorizontal .rmFirst 
    { 
        background-image: url('Menu/rmVSprite.png'); 
        background-color: #ffffff;  
        background-repeat: repeat-y; 
    } 
     
    * html .rmRoundedCorners_MenuDefault .rmGroup .rmItem, 
    * html .rmRoundedCorners_MenuDefault ul.rmHorizontal .rmFirst 
    { 
        background-image: url('Menu/rmVSprite.png'); 
        background-color: #ffffff;  
        background-repeat: repeat-y; 
    } 
     
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmGroup, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrap .rmItem, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmGroupColumn .rmItem, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmHorizontal .rmItem, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrap .rmVertical, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrap .rmItem, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmHorizontal .rmItem, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrap .rmVertical 
    { 
        background-image: none; 
    } 
     
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmGroup, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrap .rmItem, 
    * html .rmRoundedCorners_MenuDefault .rmHorizontal .rmItem, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrap .rmVertical 
    { 
        background-image: none; 
    } 
     
    .RadMenu_MenuDefault .rmRoundedCorners .rmGroupColumn 
    { 
        background-color: #ffffff; 
    } 
     
    .RadMenu_MenuDefault .rmBottomLeft, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners ul.rmGroup, 
    .RadMenu_MenuDefault .rmRoundedCorners ul.rmGroup, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmMultiColumn 
    { 
        background-image:  url('Menu/rmRoundedLeft.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer, 
    * html .rmRoundedCorners_MenuDefault .rmGroup ul.rmGroup, 
    * html .rmRoundedCorners_MenuDefault ul.rmGroup 
    { 
        background-image:  url('Menu/rmRoundedLeft.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    .RadMenu_MenuDefault .rmTopRight, 
    .RadMenu_MenuDefault .rmBottomRight 
    { 
        background-image:  url('Menu/rmRoundedRight.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    .RadMenu_MenuDefault .rmTopFix, 
    .RadMenu_MenuDefault .rmBottomFix, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmGroup .rmFirst, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmGroup .rmFirst, 
    .rmRoundedCorners_MenuDefault .rmGroup .rmFirst 
    { 
        border-color: #969696; 
    } 
     
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmTopFix, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix 
    { 
        background: #ffffff; 
    } 
     
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmTopFix, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmBottomFix 
    { 
        background: #ffffff; 
    } 
     
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow 
    { 
        background-color: #ffffff; 
        border: 0; 
    } 
     
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmTopArrow, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmBottomArrow, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmLeftArrow, 
    * html .rmRoundedCorners_MenuDefault .rmScrollWrapContainer .rmRightArrow 
    { 
        background-color: #ffffff; 
        border: 0; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmBottomLeft, 
    .RadMenu_MenuDefault_rtl .rmRoundedCorners ul.rmGroup, 
    .RadMenu_MenuDefault_rtl .rmRoundedCorners .rmMultiColumn, 
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_MenuDefault .rmScrollWrapContainer .rmBottomLeft, 
    .rmRoundedCorners.RadMenu_MenuDefault_Context_rtl ul.rmGroup, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer 
    { 
        background-image: url('Menu/rmRoundedLeft_rtl.png'); 
    } 
     
    .RadMenu_MenuDefault_rtl .rmTopRight, 
    .RadMenu_MenuDefault_rtl .rmBottomRight 
    { 
        background-image: url('Menu/rmRoundedRight_rtl.png'); 
    } 
     
    .RadMenu_MenuDefault_rtl li.rmTopFix, 
    .RadMenu_MenuDefault_rtl li.rmBottomFix, 
    .RadMenu_MenuDefault_rtl .rmRoundedCorners .rmGroup .rmItem, 
    .rmRoundedCorners.RadMenu_MenuDefault_Context_rtl .rmGroup .rmItem 
    { 
        background-position: 101% 0; 
    } 
     
    .RadMenu_MenuDefault .rmSlide .rmScrollWrap 
    { 
        background-image: none; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmGroup, 
    .RadMenu_MenuDefault_rtl .rmMultiColumn, 
    .RadMenu_MenuDefault_rtl .rmGroup .rmVertical 
    { 
        background-position: 100% 0; 
    } 
     
    .RadMenu_MenuDefault .rmRootGroup li.rmItem .rmGroup 
    { 
        padding-bottom: 0; 
    } 
     
    .RadMenu_MenuDefault .rmRootGroup .rmHorizontal 
    { 
        background-image: none; 
    } 
     
    .RadMenu_MenuDefault .rmScrollWrap .rmVertical 
    { 
        border: 0; 
    } 
     
    .RadMenu_MenuDefault .rmRoundedCorners .rmScrollWrapContainer li.rmItem, 
    .RadMenu_MenuDefault_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem, 
    .rmRoundedCorners_MenuDefault .rmScrollWrapContainer li.rmItem 
    { 
        background: none; 
    } 
     
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmLink, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmLink:hover, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmFocused, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmSelected, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmExpanded 
    { 
        padding-top: 0; 
        padding-bottom: 0; 
        border: 0; 
    } 
     
    .RadMenu_MenuDefault .rmGroup .rmLast a.rmLink, 
    .RadMenu_MenuDefault .rmGroup .rmLast a.rmLink:hover, 
    .RadMenu_MenuDefault .rmGroup .rmLast a.rmFocused, 
    .RadMenu_MenuDefault .rmGroup .rmLast a.rmSelected, 
    .RadMenu_MenuDefault .rmGroup .rmLast a.rmExpanded 
    { 
        padding-bottom: 1px; 
    } 
     
    .RadMenu_MenuDefault .rmGroup a.rmLink, 
    .RadMenu_MenuDefault .rmGroup .rmText, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled:hover, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled .rmText, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled:hover .rmText 
    { 
        background-position: 0 500px; 
        background-repeat: no-repeat; 
        background-color: transparent; 
    } 
     
    .RadMenu_MenuDefault .rmGroup a.rmLink:hover, 
    .RadMenu_MenuDefault .rmGroup a.rmFocused, 
    .RadMenu_MenuDefault .rmGroup a.rmSelected, 
    .RadMenu_MenuDefault .rmGroup a.rmExpanded 
    { 
        background-position: 0 -168px; 
    } 
     
    .RadMenu_MenuDefault .rmGroup a.rmLink:hover .rmText, 
    .RadMenu_MenuDefault .rmGroup a.rmFocused .rmText, 
    .RadMenu_MenuDefault .rmGroup a.rmSelected .rmText, 
    .RadMenu_MenuDefault .rmGroup a.rmExpanded .rmText 
    { 
        background-position: 100% -192px; 
    } 
     
    /* <expand arrows> */ 
     
    .RadMenu_MenuDefault .rmGroup .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup .rmExpandDown, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled .rmExpandDown, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled:hover .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown 
    { 
        background-position: 100% -216px; 
    } 
     
    .RadMenu_MenuDefault .rmGroup a.rmLink:hover .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup a.rmFocused .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup a.rmSelected .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup a.rmExpanded .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup a.rmLink:hover .rmExpandDown, 
    .RadMenu_MenuDefault .rmGroup a.rmFocused .rmExpandDown, 
    .RadMenu_MenuDefault .rmGroup a.rmSelected .rmExpandDown, 
    .RadMenu_MenuDefault .rmGroup a.rmExpanded .rmExpandDown 
    { 
        background-position: 100% -240px; 
    } 
     
    .RadMenu_MenuDefault .rmGroup a.rmDisabled:hover .rmExpandRight, 
    .RadMenu_MenuDefault .rmGroup a.rmDisabled:hover .rmExpandDown 
    { 
        background-image: url('Menu/rmSprite.png'); 
        background-position: 100% -216px; 
    } 
     
    /* </expand arrows> */ 
     
    /* <rtl> */ 
     
    .RadMenu_MenuDefault_rtl a.rmLink 
    { 
        background-position: 100% -96px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmText 
    { 
        background-position: 0 -72px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmVertical a.rmExpanded .rmText, 
    .RadMenu_MenuDefault_rtl .rmVertical a.rmExpanded:hover .rmText 
    { 
        background-position: 0 500px; 
        background-repeat: no-repeat; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmGroup a.rmLink:hover, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmFocused, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmSelected, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmExpanded 
    { 
        background-position: 100% -264px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmGroup a.rmLink:hover .rmText, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmFocused .rmText, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmSelected .rmText, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmExpanded .rmText 
    { 
        background-position: 0 -288px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmGroup .rmExpandLeft 
    { 
        background-position: 0 -312px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmGroup a.rmLink:hover .rmExpandLeft, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmFocused .rmExpandLeft, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmSelected .rmExpandLeft, 
    .RadMenu_MenuDefault_rtl .rmGroup a.rmExpanded .rmExpandLeft 
    { 
        background-position: 0 -336px; 
    } 
     
    /* </rtl> */ 
     
    /* </Submenu items> */ 
     
    /* <Submenu offsets (Telerik - specific, overlapping submenus)> */ 
     
    .RadMenu_MenuDefault .rmSlide 
    { 
        margin: 0 0 0 -1px; 
    } 
     
    .RadMenu_MenuDefault .rmVertical .rmSlide, 
    .RadMenu_MenuDefault .rmSlide .rmSlide, 
    .RadMenu_MenuDefault_Context .rmGroup .rmSlide 
    { 
        margin: 0 0 0 -5px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmSlide 
    { 
        margin: 0 0 0 0; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmFirst .rmSlide 
    { 
        margin-left: 1px; 
    } 
     
    .RadMenu_MenuDefault_rtl .rmVertical .rmSlide, 
    .RadMenu_MenuDefault_rtl .rmSlide .rmSlide, 
    .RadMenu_MenuDefault_Context_rtl .rmGroup .rmSlide 
    { 
        margin: 0 0 0 5px; 
    } 
     
    /* </Submenu offsets> */ 
     
    /* <Scrolling arrows> */ 
     
    .RadMenu_MenuDefault .rmLeftArrow, 
    .RadMenu_MenuDefault .rmRightArrow 
    { 
        background-color: #e6e6e6; 
    } 
     
    .RadMenu_MenuDefault .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; } 
    .RadMenu_MenuDefault .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; } 
     
    .RadMenu_MenuDefault .rmTopArrow, 
    .RadMenu_MenuDefault .rmBottomArrow, 
    .RadMenu_MenuDefault .rmGroup .rmLeftArrow, 
    .RadMenu_MenuDefault .rmGroup .rmRightArrow 
    { 
        background-color: #e6e6e6; 
    } 
     
    .RadMenu_MenuDefault .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; } 
    .RadMenu_MenuDefault .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; } 
     
    /* </Scrolling arrows> */ 
     
    /* <Separators> */ 
     
    .RadMenu_MenuDefault .rmHorizontal .rmSeparator .rmText, 
    .RadMenu_MenuDefault .rmVertical .rmHorizontal .rmSeparator .rmText 
    { 
        height: 22px; 
        margin: 1px 0 0; 
        width: 1px; 
        background-color: #a8a8a8; 
    } 
     
    .RadMenu_MenuDefault_Context .rmSeparator .rmText, 
    .RadMenu_MenuDefault .rmHorizontal .rmGroup .rmSeparator .rmText, 
    .RadMenu_MenuDefault .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText 
    { 
        background-color: transparent; 
        background-position: 0 -406px; 
    } 
     
    /* </Separators> */ 
     
    /* </RadMenu / Telerik> */ 
     
     
     
     
     
     
     
     
     
     div.RadMenu_MenuDefault .rmRootGroup { 
     
        background-image: none; 
     
        background-color: rgb(254, 242, 228); 
     
        border-top-style: solid; 
     
        border-top-width: 0px; 
     
        border-bottom-style: solid; 
     
        border-bottom-width: 0px; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink:hover { 
     
        background-color: rgb(255, 224, 193); 
     
        font-weight: bold; 
     
        color: rgb(17, 17, 17); 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink { 
     
        font-family: Arial; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink:hover { 
     
        font-weight: bold; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmExpanded { 
     
        background-color: rgb(254, 242, 228); 
     
        font-weight: bold; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmExpanded .rmText { 
     
        font-weight: bold; 
     
    } 
     
     
     
     div.RadMenu_MenuDefault .rmItem .rmLink { 
     
        padding-left: 0px; 
     
        padding-right: 0px; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink .rmText { 
     
        padding-left: 22px; 
     
        padding-right: 22px; 
     
    } 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     div.RadMenu_MenuDefault .rmRootGroup { 
     
        border-right-style: solid; 
     
        border-right-width: 0px; 
     
        border-left-style: solid; 
     
        border-left-width: 0px; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink { 
     
        color: rgb(153, 153, 153); 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink:hover { 
     
        font-weight: normal; 
     
        color: rgb(0, 0, 0); 
     
        background-color: rgb(254, 242, 228); 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmLink .rmExpandDown { 
     
        color: rgb(0, 0, 0); 
     
        font-weight: normal; 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmDisabled { 
     
        color: rgb(221, 221, 221); 
     
    } 
     
     div.RadMenu_MenuDefault .rmItem .rmGroup { 
     
        background-color: rgb(254, 242, 228); 
     
        background-image: none; 
     
    } 
     
     div.RadMenu_MenuDefault { 
     
        background-color: rgb(254, 242, 228); 
     
    } 
     
     

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Jun 4, 2010 (permalink)

    Hello Alice,

    The white background color is the selected state of a RadMenu item. To remove it, either style the .rmSelected class or just add EnableSelection="false" to your RadMenu definition. Let me know if this helps.

    All the best,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

    Reply

  • Alice Leong avatar

    Posted on Jun 9, 2010 (permalink)

    Hi Kamen,

    the "EnableSelection" works, but the font didnt get bold.
    I tried to add another class .rmSelected, but it doesnt changed anything.

    Thanks.

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Jun 11, 2010 (permalink)

    Hi Alice,

    If you set EnableSelection="false", the .rmSelected class will stop working, so no need to set it. You didn't mention anything about bold before so if you just need to make the font bold on hover, add this CSS rule:
    .RadMenu_MenuDefault a.rmLink:hover .rmText
    {
       font-weight: bold;
    }
    If you want to make it bold after clicking on it, add this CSS rule instead:
    .RadMenu_MenuDefault a.rmFocused .rmText
    {
       font-weight: bold;
    }

    Sincerely yours,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

    Reply

    • Say Hello to Telerik's PivotGrid for ASP.NET AJAX, Silverlight, WPF and WinForms. Now packed with OLAP support.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > how to change the selected RadMenu background color