radmenu css styling question

[Michael]

Hi, I have a radmenu and I want to remove the default gray background-image (PFA sample image), I tried few ways but that is also removing the arrows from the submenu, I want the arrows to be present, I only want the gray background image to be removed, below is the custom css.

Also please let me know how to change the arrow color for the Radmenu_Default skin

.RadMenu_Default, .RadMenu_Default .rmRootGroup, .RadMenu_Default a.rmLink {
font-size: 16px !important;
color: #ebe3e3 !important;
border: 0px !important;
background-color: #8F0800 !important;
background-image: none !important;
}

.RadMenu_Default .rmLink:hover, .RadMenu_Default .rmFocused,
.rmLink .RadMenu_Default .rmSelected, .RadMenu .rmGroup .rmItem a.rmLink,
.RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover, .RadMenu_Default .rmGroup {
background-color: #C12610 !important;
background-image: none !important;
background-position: 0px 0px !important;
border: 0px !important;
}

[Ivan Zhekov]

Michael,

in classic render mode the arrow is part of the image sprite, so if you remove the background image (the gray thing) you remove the expand arrow.

In light-weight render mode, however, the arrow is not part of an image and you can safely hide the background image.

I am attaching two sample pages -- one lite one classic -- to show what happens and the styles you need to customize.

Note: you need to have all instances of RadMenu on the page to be the same render mode.

Also, I would suggest that you use a new skin (in light-weight rendering that's extremly easy) instead of building on top existing one, to avoid overriding lots of styles.

Regards,
Ivan Zhekov
Telerik