Simple CSS Example

[DTech]

I've searched the help documents and forum for a simple CSS example of controlling the appearance of the RadMenu's items and sub menu items.  Any simple examples of just the CSS controlling the main menu items and sub menu items forecolor and background out there? 

All I need to do is make the menu background blue and forecolor white for the main menu items.  Then make the submenu items white background and black forecolor.

[Yana]

Hi Mario,

I suggest in your case you use Simple skin and overwrite the colors like this:

<telerik:RadMenu ID="menu1" runat="server" Skin="Simple">
    <Items>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

and the styles:

<style type="text/css">
    /* for root items */

    div.RadMenu_Simple ul.rmRootGroup
    {
        background-color: blue;
    }

     div.RadMenu_Simple .rmLink
     {
         color: #fff;
     }

     /* for hover, focused, expanded items */
     div.RadMenu_Simple .rmItem .rmLink:hover,
     div.RadMenu_Simple .rmItem .rmFocused,
     div.RadMenu_Simple .rmItem .rmSelected,
     div.RadMenu_Simple .rmItem .rmExpanded {
            background:#fff none repeat scroll 0 0;
            border:1px solid blue;
            color: blue;
    }

    /*for subitems */

    div.RadMenu_Simple .rmGroup
    {
        background: #fff;
    }

     div.RadMenu_Simple .rmGroup .rmLink
     {
         color: #000;
     }

     /* for hover, focused, expanded items */
     div.RadMenu_Simple .rmGroup .rmItem .rmLink:hover,
     div.RadMenu_Simple .rmGroup .rmItem .rmFocused,
     div.RadMenu_Simple .rmGroup .rmItem .rmSelected,
     div.RadMenu_Simple .rmGroup .rmItem .rmExpanded {
            background:#000 none repeat scroll 0 0;
            border:1px solid #fff;
            color: #fff;
    }
</style>

Sincerely yours,
Yana
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.

[DTech]

Thank you.  That worked!