This is a migrated thread and some comments may be shown as answers.

Change MenuItem background on Hover through CSS

1 Answer 571 Views

This is a migrated thread and some comments may be shown as answers.

Sri Hari asked on 18 Sep 2009, 01:28 PM

Hi,

I'm trying to change the background of Menu Item through CSS. I'm referring the below link:
http://www.telerik.com/help/aspnet-ajax/menu_appearancecssclassofitems.html.

Below is my code

    
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style>     
        
                .MainMenu 
        
                { 
        
                  color: white !important; 
        
                  background-color: #A8C2B9 !important; 
        
                } 
        
                .MainMenu:hover 
        
                { 
        
                  color: white !important; 
        
                  background-color: #00563D !important; 
        
                } 
        
                .SubMenu 
        
                { 
        
                  color: white !important; 
        
                  background-color: #A8C2B9 !important; 
        
                } 
        
                .SubMenu:hover 
        
                { 
        
                  background: none; 
        
                  color: white !important; 
        
                  background-color: #00563D !important; 
        
                } 
        
                .Expanded 
        
                { 
        
                  color: white !important; 
        
                  background-color: #00563D !important; 
        
                } 
        
                .Focused 
        
                { 
        
                  color: white !important; 
        
                  background-color: #00563D !important; 
        
                } 
        
                div.RadMenu .rmFocused 
        
                { 
        
                    background: none; 
        
                } 
        
               </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <div> 
        
                        <telerik:RadMenu ID="RadMenu1" runat="server" CssClass="MainMenu" Skin="Default" > 
        
                            <Items> 
        
                                <telerik:RadMenuItem runat="server" Text="Root Item 1" ExpandedCssClass="Expanded" 
        
                                    CssClass="MainMenu"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem runat="server" Text="property" CssClass="SubMenu" FocusedCssClass="Focused"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2" CssClass="SubMenu" 
        
                                            FocusedCssClass="Focused"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3" CssClass="SubMenu" 
        
                                            FocusedCssClass="Focused"> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem runat="server" Text="Root Item 2" ExpandedCssClass="Expanded" 
        
                                    CssClass="MainMenu"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem runat="server" Text="This is another very long item." CssClass="SubMenu" 
        
                                            FocusedCssClass="Focused"> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                            </Items> 
        
                        </telerik:RadMenu>

The default hover image background is appearing from the Skin image rather than css colors. I here by request you to kindly look into this and do the needful ASAP. Kindly let me know if you require any other details.

Thanks,

Sri Hari Acha

1 Answer, 1 is accepted

answered on 21 Sep 2009, 10:57 AM

Hello Sri Hari,

Try the following CSS in order to change the background color of menuitem on hovering it.

CSS:

    
            <style type="text/css"> 
        
            .RadMenu_Default .rmLink:hover, 
        
            .RadMenu_Default .rmFocused, .rmLink 
        
            .RadMenu_Default .rmSelected 
        
            { 
        
                background-color: red !important; 
        
                background-image: none !important; 
        
                background-position: 0px 0px !important; 
        
            } 
        
            .RadMenu_Default .rmText, 
        
            { 
        
                background-image: none !important; 
        
            } 
        
            </style>

-Shinu.