Having some problems with the custom CSS class for menu item

2 posts, 0 answers
  1. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 08 Mar 2010 Link to this post

    Hi.
    I have applied a custom css class for one partuclar menu item in my Rad Menu so that it would display an application specific image. 

    Problem is that it still seems to be also applying the default class (.rmLink) attributes from the menu css as well.  The menu item displays as intended until the user mouses over the item, then it is applying the .rmLink hover attributes, as well as my custom class attributes. 

    What am I missing as far as disabling the default menu css?

    <style> 
    .LogoItem  
    {  
    background:url('url to my image') no-repeat -280px -48px;  
    cursor:pointer;  
    width:100px;  
    height:100px;  
    vertical-align:top;  
    text-align:center;  
    }  
     
    .LogoItem:hover   
    {  
    background-repeat:no-repeat;    
    background-position: -380px -48px;  
    }   
     
    </style> 
     
    <telerik:RadMenu ID="RadMenu2"  runat="server" Flow="Horizontal" EnableEmbeddedSkins="True" Skin="Default" OnItemClick="RadMenu1_ItemClick">  
                <CollapseAnimation Type="InOutSine" Duration="300" /> 
                <ExpandAnimation Type="InOutSine" Duration="300" /> 
                <Items> 
                    <telerik:RadMenuItem runat="server"   
                        DisabledCssClass="LogoItem" ExpandMode="ClientSide"   
                         BorderStyle="none"   
                                            CssClass="LogoItem" ClickedCssClass="LogoItem" ExpandedCssClass="LogoItem" FocusedCssClass="LogoItem"   
                        OuterCssClass="LogoItem" SelectedCssClass="LogoItem">  
                        <Items> 
                        <telerik:RadMenuItem runat="server" Text="Desktop Home" ></telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" Text="Our Website">  
                                <Items> 
                                    <telerik:RadMenuItem runat="server" Text="Departments" > 
                                    </telerik:RadMenuItem> 
                                    <telerik:RadMenuItem runat="server" Text="Services">  
                                    </telerik:RadMenuItem> 
                                </Items> 
                            </telerik:RadMenuItem> 
    </items> 
            </telerik:RadMenu>    
  2. Yana
    Admin
    Yana avatar
    4831 posts

    Posted 10 Mar 2010 Link to this post

    Hi Mike,

    The default styles is still applied even if you've set CssClass property. Please change your code like this in order to overwrite it:

    Copy Code
    <telerik:RadMenu ID="RadMenu2" runat="server" Flow="Horizontal" EnableEmbeddedSkins="True"
        Skin="Default">
        <CollapseAnimation Type="InOutSine" Duration="300" />
        <ExpandAnimation Type="InOutSine" Duration="300" />
        <Items>
            <telerik:RadMenuItem runat="server" DisabledCssClass="LogoItem" ExpandMode="ClientSide"
                BorderStyle="none" CssClass="LogoItem" ClickedCssClass="LogoItem" ExpandedCssClass="LogoItem"
                FocusedCssClass="LogoItem"  SelectedCssClass="LogoItem">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Desktop Home">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Our Website">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Departments">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Services">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    and the style:

    Copy Code
    <style type="text/css">
        div.RadMenu a.LogoItem
        {
            background: #fff url('url to my image') no-repeat -280px -48px
            cursor: pointer;
            width: 100px;
            height: 100px;
            vertical-align: top;
            text-align: center;
        }
        div.RadMenu a.LogoItem:hover
        {
            background: #fff url('url to my image') no-repeat -380px -48px;
        }
         
        .LogoItem .rmText, .LogoItem:hover .rmText
        {
            background: none !important;
        }
    </style>


    Best wishes,
    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.
Back to Top