How do you set the RadMenu selected color?

[Matt]

Greetings

This is a really easy one to answer.

I'm using the RadMenu with the metro skin. It's all looking great but I want to change the selected menu item's background color.

Currently the background changes to blue and the text to white when a menu item is clicked. I have tried to override this with:

.RadMenu_Metro .rmItem a::selection
{
    background-color: #239300 !important;
}

But no luck. It's a tricky one to catch using the web browser developer tools as it changes on the click event.

Thanks in advance,
Matt

[Shinu]

Hi Matt,

Try overriding the default CSS as follows.

CSS:

<style type="text/css">
    .RadMenu_Metro .rmSelected
    {
        background-color: Green !important;
    }
</style>

Thanks,
Shinu.

[Matt]

Sorry, that did not achieve the effect I was after. 

It's the sub menu items that I want to change (I might not have explained that clearly)

I hope the attached shows what I am trying to change.

Matt

[Kate]

Hi Matt,

In order to alter the background color of the selected child items of the RadMenu you can use the following css class selector:

div.RadMenu_Metro .rmGroup .rmFocused,
       div.RadMenu_Metro .rmGroup .rmFocused:hover,
       div.RadMenu_Metro .rmGroup .rmSelected,
       div.RadMenu_Metro .rmGroup .rmSelected:hover,
       div.RadMenu_Metro .rmGroup .rmExpanded,
       div.RadMenu_Metro .rmGroup .rmExpanded:hover {
           background-color: red;
       }

Regards,
Kate
Telerik

[Matt]

Beautiful. I knew it would be easy.
Thank you.
Matt