This looks very good, I have been looking for a...

[crystal rain]

Thread automatically created, you can use it to discuss about the project!

[grizzled stirrup]

Hi @sterile laurel I use tailwind group class for each li that have mega menu. https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

then on each li I have onMouseEnter and onMouseLeave which set the state I use to conditionally set the group class.

below is how I did it.

<ul className="container flex flex-col justify-evenly xl:flex-row ">
{menuItems.map((menuItem, i) => (
<li
key={i}
className={isMegaMenuOpen ? 'group' : ''}
onMouseEnter={() => setIsMegaMenuOpen(true)}
onMouseLeave={() => setIsMegaMenuOpen(false)}
>
<Link
href={menuItem?.slug ?? '/'}
className={flex items-center gap-2 py-2.5 px-[30px] relative uppercase hover:text-brand-primary not-italic font-semibold text-[13px] tracking-widest}
>
{menuItem?.title}{' '}
{menuItem.columns ? <GbMenuCarret /> : ''}
</Link>
{menuItem.columns ? (
<MegaMenu columns={menuItem.columns} />
) : (
''
)}
</li>
))}
</ul>

I hope that helps