I'm not understand why my hover functionality doesn't work when I add group names. In this example, I want a main menu of items to dropdown on the first hover group and then secondary menu items to dropdown when I hover items inside of that group. This is how I've tried to achieve that. There's several more inner dropdown items with different groups names, but I just included the first one.
<div id="services-dropdown" class="group/services relative"><a href="#" class="links"><li class="navitems font-bold p-3.5">OUR SERVICES</li></a><div id="services-dropdown-content" class="hidden absolute top-[53px] text-[1em] w-[200px] h-[199px] bg-navbarblack group-hover/services:flex flex-col space-y-5"><div class="inner-services-dropdown relative group/excavation"><a href="#" class="links m-5">Excavation Services</a><div class="inner-dropdown-content hidden absolute left-full top-[-20px] bg-navbarblack text-headerwhite w-[220px] group-hover/excavation:flex flex-col"><a href="#" class="links">Excavation</a><a href="#" class="links">Septic Systems</a><a href="#" class="links">Foundations</a><a href="#" class="links">Drainage & Tile Repair</a><a href="#" class="links">Land Clearing</a><a href="#" class="links">Basement waterproofing</a><a href="#" class="links">Retaining Walls</a></div></div></div></div>Using group names, nothing happens. If I remove the group names and just use "group" it works, but all the content displays on hover when I want there to be secondary hover groups