How to change text color and background color of root menu items in ':hover'-event?

Radzen.Blazor Components
1

Hi!
Please tell me how to change text color and background color of ROOT menu items in ':hover'-event?

Thanks!!!

<RadzenLayout style="height: auto;">
    <RadzenHeader>
         <RadzenMenu Click="OnParentClicked">
            <RadzenMenuItem Text="General" Icon="home">
                <RadzenMenuItem Text="Buttons" Path="buttons" Icon="account_circle"></RadzenMenuItem>
                <RadzenMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenMenuItem>
                <RadzenMenuItem Click="OnChildClicked" Text="ChildClick" Icon="attach_file"></RadzenMenuItem>
                <RadzenMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenMenuItem>
                <RadzenMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenMenuItem>
            </RadzenMenuItem>
            <RadzenMenuItem Text="Inputs" Icon="payment">
                <RadzenMenuItem Text="CheckBox" Path="checkbox" Icon="check_circle"></RadzenMenuItem>
                <RadzenMenuItem Text="TextBox" Path="textbox" Icon="input"></RadzenMenuItem>
                <RadzenMenuItem Text="TextArea" Path="textarea" Icon="description"></RadzenMenuItem>
                <RadzenMenuItem Text="Password" Path="password" Icon="payment"></RadzenMenuItem>
                <RadzenMenuItem Text="Numeric" Path="numeric" Icon="aspect_ratio"></RadzenMenuItem>
                <RadzenMenuItem Text="DatePicker" Path="datepicker" Icon="date_range"></RadzenMenuItem>
            </RadzenMenuItem>
    </RadzenMenu>
2

Hi @Andrey_Ya,

You can use the following CSS:

:root {
    --rz-menu-top-item-hover-color: white;
    --rz-menu-top-item-hover-background-color: red;
}
1 Like
3

Or if you want it to be specific to the menu itself use inline style attribute:

<RadzenMenu style="--rz-menu-top-item-hover-color: white; --rz-menu-top-item-hover-background-color: red;" ...>
1 Like