I'm working with TailwindCSS and daisyUI to build a dropdown menu. The code is below.
The problem is that when a dropdown menu item is clicked on (when it becomes active), it becomes purple, even though I'm using the utility class bg-white on the <li> element. How can I customize the color of the dropdown menu items on click? I'd really prefer a solution that is CSS-only, as I am using the CDN versions of Tailwind and daisyUI (and therefore have no tailwind.config.js to modify.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
<a class="mx-2 text-2xl">ABOUT</a>
<ul class="dropdown-content menu bg-blue-primary items-center">
<li class="bg-white"><a>Item 1</a></li>
<li class="bg-white"><a>Item 2</a></li>
</ul>
</div>I had changed the color to pink-200.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
<a class="mx-2 text-2xl">ABOUT</a>
<ul class="dropdown-content menu bg-blue-primary items-center">
<li class="bg-white"><a class=" hover:bg-pink-200 focus:bg-pink-200">Item 1</a></li>
<li class="bg-white"><a class="hover:bg-pink-200 focus:bg-pink-200">Item 2</a></li>
</ul>
</div>