Customized style for Vaadin MenuItem

Vaadin 6 / 7 / 8
1

Hi All,
I have been facing a problem in customizing the menuitem.
I have been able to set the image for menu item using the following style


.v-menubar-menuitem-quick_menu_style {
background-image: url(“icons/quick_menu_icon.png”) ;
}
.v-menubar-menuitem-recent_menu_style {
background-image: url(“icons/recent_menu_icon.png”) ;
}

The problem occurs when I click on the menu item to view the sub menu item. The Image which I set will not be visible and a blue color is filling the selected menu item. I want to set the same image when selecting the menu item.

I have tried to customize the following but failed.

[i]
.v-menubar .v-menubar-menuitem-selected {

}

Please help me in customizing this “v-menubar-menuitem-selected” for “quick_menu_style” and “recent_menu_style”
[/i]

2

Try this:

.v-menubar .v-menubar-menuitem-quick_menu_style, .v-menubar .v-menubar-menuitem-quick_menu_style.v-menubar-menuitem-selected {
background-image: url(“icons/quick_menu_icon.png”) ;
}

3

Thank you Felix Kalka for the quick response. That solved my problem. Thank you so much