Having some problems with the custom CSS class for menu item

[Mbott]

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>

[Yana]

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.