Primefaces - menubar - submenu background in collapsed state

Question

I've got question about how to edit style (specifically background color) for submenu label which is in collapsed state. There's no need to post code. Links to images below.

1. In this case submenu label is hovered. (Using .ui-menuitem-link:hover).

Case one

2 In this case menuitem is hovered, submenu is collapsed and it's background color turns to gray. So I'm interested how to access those state of submenu to change it's background to another color.

Case two

Couldn't display images due to low reputation. Thanks.

Answer 1

As @Amarnath said, your questions i a bit confusing. If I understood correctly you want to specify different styles for activated menu and submenu.

Lets say you want the first level of the menu to have a red backgroud and the the second level to have a green background. You could do that using plain css as follows:

ul li.ui-menuitem-active>a{
    background-image: none !important;
    background-color:red !important;    
}

li ul li.ui-menuitem-active>a{
    background-image: none !important;
    background-color:green !important;    
}

See if that helps.