PrimeReact: change background color of Menubar items when on hover

Question

i can't change the menu items color when on hover As you can see, when on hover the color is shown only in the corners, but not on the actual item.

This is my css code:

/*Menubar*/
.p-menubar {
    background-color: var(--primary) !important;
}
.p-menu-list {
    background-color: var(--primary) !important;
}
.p-menuitem {
    background-color: var(--primary) !important;
}
.p-menu-list:hover {
    background-color: #000 !important;
}
.p-menuitem:hover {
    background-color: #000 !important;
}
.p-menuitem-text, .p-menuitem-icon, .p-submenu-icon {
    color: var(--text-primary) !important;
}

Answer 1

If i understood correctly, you need this

.p-menuitem-active a {
    background: #000 !important;
}

or this depending on whether you want it for hover or on expand

.p-menuitem-link:hover {
    background-color: #000 !important;
}