RadMenu Styling and Levels

[Steve]

I am struggling with styling menus in my web application.  I have a vertical menu on the left side of the screen that is the main navigation menu for the site.  Within modules of the web app, I repeat some of the submenus as a horizontal tab strip across the top of the page.  (But still using the RadMenu control here.)  

See file attachment.

I would like to force the styles of the top horizontal menu to match the styles of the corresponding flyout menus on the vertical menu.  But they do not seem to want to do this since they are at different levels.  Is this possible?

Thanks in advance for any help.
Steve

[Kate]

Hi Steve,

To do so you can use the following css class selector:

div.RadMenu_Web20 a.rmLink {
    color: #000000;
}

div.RadMenu_Web20 .rmRootGroup {
    background-color: #FFFFFF;
    border: 1px solid #6788BE;
}

div.RadMenu_Web20 .rmRootGroup,
div.RadMenu_Web20 a.rmLink,
div.RadMenu_Web20 .rmText,
div.RadMenu_Web20 .rmLeftArrow,
div.RadMenu_Web20 .rmRightArrow,
div.RadMenu_Web20 .rmTopArrow,
div.RadMenu_Web20 .rmBottomArrow {
        background-image: none;
}

You can also take a look at the following help article where you can find more information on how to customize the look of the RadMenu control - Tutorial: Creating A Custom Skin Using Sprite.

Regards,
Kate
Telerik

[Steve]

Thanks for the quick response Kate.  That definitely put me on the right path.  

I have one more question.  On the flyout menus, the image has a different background than the text.  I would like to match that as well, but I'm having difficulty finding the style that's controlling that background.  Can you tell me where to find that?

Thanks,
Steve

[Shinu]

Hi Steve,

Please try the following CSS which works fine at my end.

CSS :

<style type="text/css">
        .RadMenu_Web20 .rmGroup
        {
            background-image: none !important;
        }
</style>

Thanks,
Shinu.