What is the correct css selector for the parent of a sub child?

[Dave]

I am trying to set the background color of the middle level when a menu is 3 levels deep.

In this picture I want the blue background to be grey.

My existing CSS is: 

.e-menu-container {
    background-color: lightsteelblue;
}


    .e-menu-container .e-menu .e-menu-item.e-selected {
        background-color: lightslategray;
    }


    .e-menu-container .e-ul .e-menu-item.e-focused {
        background-color: slategrey;
    }


    .e-menu-container.e-menu-popup {
        background-color: lightgrey;
    }

​

Thanks for your help

[Saravanan Jayavel]

Hi Dave,

Thank you for reaching out.

To customize the background color for a three-level nested menu, as per the your requirement, you can achieve this by using the selector below:

Css selector :

 .e-menu-container .e-ul .e-menu-item.e-selected {

    background-color: green;

}

Screenshot Output:

For your reference we attached a sample.

Sample: Attached as a zip file

To explore more customization options, check out our official documentation:

Styles and Appearances in Blazor Menu Bar Component | Syncfusion

Check out the sample and let us know if you need any further assistance.

Regards,

Saravanan J

Attachment: BlazorMenuBarSample_75a08d3e.zip