make the menus stay open when clicking a menu category

index.html

@@ -62,9 +62,9 @@
             </a>
 
             <div class="hidden md:flex space-x-8">
-                <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+        <div class="group relative">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Plumbing</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
 <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
                         <a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
@@ -88,9 +88,9 @@
                     </div>
                 </div>
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Cooling</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">AC Repair</a>
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Cooling</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
+<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">AC Repair</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Mini-Splits</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Maintenance</a>
                     </div>

plumbing-repair.html

@@ -71,18 +71,18 @@
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
                     </div>
                 </div>
-                <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+                <div class极="group relative">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Drains</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
                     </div>
                 </div>
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Furnace Repair</a>
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Heating</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2极 w-48 z-50">
+<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Furnace Repair</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
                     </div>

sump-pumps.html

@@ -63,8 +63,8 @@
 
             <div class="hidden md:flex space-x-8">
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Plumbing</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg极-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
 <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
                         <a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
                         <a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
@@ -88,8 +88,8 @@
                     </div>
                 </div>
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Cooling</a>
-                   极<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Cooling</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">AC Repair</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Mini-Splits</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Maintenance</a>

water-heaters.html

@@ -63,8 +63,8 @@
 
             <div class="hidden md:flex space-x-8">
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle极('open')">Plumbing</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48极 z-50 transition-opacity duration-200">
 <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
                         <a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
                         <a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
@@ -72,8 +72,8 @@
                     </div>
                 </div>
                 <div class="group relative">
-                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
-                    <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
+                    <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium" onclick="event.preventDefault(); this.parentElement.classList.toggle('open')">Drains</a>
+                    <div class="absolute hidden group-hover:block group-[.open]:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>