[Solved] Remove t-state-hover

[Gabe]

How can I remove the t-state-hover on the menu parent only.
I would like the hover class to be applied on the child items in each of the drop menus though, just want to remove it out of the main menu only.

[Atanas Korchev]

Hi Gabe,

 The hover state is applied always when the user hovers a menu item. Modifying this behavior would require modification of the source code to exclude the root items. I see only one workaround - modifying the skin so the hover style looks the same as the default one for the first level items only.

Regards,

Atanas Korchev
the Telerik team

[Gabe]

How can I change this for only the parent when the same style is also applied to the children.
Can you give me an example?

[Atanas Korchev]

Hi Gabe,

 Which skin are you using? We will provide the right CSS rule overrides depending on that.

Regards,
Atanas Korchev
the Telerik team

[Gabe]

I am using the simple skin

[Dimo]

Hello Gabe,

You can use the following CSS code to override the Menu's root items' hover styling:

/* prevent background color change */
.t-menu>.t-item>.t-state-hover
{
    background:transparent;
}

/* prevent arrow color change */
.t-menu>.t-item>.t-state-hover>.t-arrow-down
{
    background-position:-16px -176px;
}

Kind regards,
Dimo
the Telerik team

[Gabe]

Worked perfect, thank you.