How can I use custom background colours for Navigation bar sub menus

[iany]

I'm using the Colored Background version of the Navigation Bar. I'm trying to set a custom background color on hover for the sub menus.

I create a custom color and class in my global styles:

Code: Select all

:root {
    --color-lilac: #E2E3F2;
}

.bg-lilac {
    background-color: var(--colour-lilac);
}

Then I try to apply this class to the hover state of a sub menu item:

Code: Select all

<ul className="list-none py-3 px-6 m-0 md:px-0 md:py-0 border-round shadow-0 md:shadow-2 md:absolute md:border-1 border-50 surface-overlay hidden origin-top w-full md:w-15rem cursor-pointer">
    <li>
        <a className="p-ripple flex p-3 align-items-center text-purple hover:bg-blue-500 hover:text-white transition-colors transition-duration-150 w-full">
            <span className="font-bold">Sub menu item</span>
            <Ripple />
        </a>
    </li>
</ul>

If I use a background color provided by PrimeFlex it works. E.g

Code: Select all

hover:bg-blue-500

.
If I use my custom background colour it doesn't work. E.g.

Code: Select all

hover:bg-lilac

In all other areas of my UI I can apply the background colour successfully. How may I do so using this Block?