Formatting Of Sub Menu Issue

Sir, I have a formatting issue that I can not seem to resolve

I am using Syncfusion Menu control (vertical) inside a Syncfusion Sidebar.

When the mouse is hovered over the Menu (in this case the 'Projects' menu), its background changes to Orange as shown in the Screenshot. (Note that I use a 'Star to indication the position of the Mouse, as Screenshot does not include the mouse pointer). This is as expected


 

However, when I then  move the mouse right to select a sub menu, two things happen (see next screen shot, and again note that the 'star' indicates the position of the mouse)

1) The 'Projects' menu orange background becomes grey

2) The Submenu does not highlight Orange, but remains gr



What I am trying to achieve is that 

a) The 'Projects' menu remains Orange background, and 

b) the Selected item in the Sub Menu is also Orange.

How might I achieve this?



3 Replies

YA YuvanShankar Arunagiri Syncfusion Team August 24, 2022 10:02 AM UTC

Hi James,


We have validated your reported query and prepared the sample based on your requirement. We can achieve your requirement by using the below CSS style.


[app.component.css]:

.e-menu-item {

    background-color: dodgerblue !important;

}

 

.e-menu-item.e-selected {

    background-color: orange !important;

}

 

.e-menu-item:hover {

    background-color: orange !important;

}


Sample link: https://stackblitz.com/edit/angular-nny79d?file=app.component.css


Could you please check the above sample and get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A



JA James August 24, 2022 08:43 PM UTC

 Great work  YuvanShankar  !


It seems so easy when you point it out

James



YA YuvanShankar Arunagiri Syncfusion Team August 25, 2022 04:00 AM UTC

Hi James,


We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.


Regards,

YuvanShankar A


Loader.
Up arrow icon