make the menus able to stay up when hovering for easier menu navigation

index.html

@@ -18,7 +18,13 @@
         .nav-link:hover {
             color: #10b981;
         }
-        .service-card:hover {
+        .group:hover .group-hover\\:block {
+            display: block;
+        }
+        .group .group-hover\\:block {
+            transition: opacity 0.2s ease-in-out;
+        }
+.service-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
@@ -58,8 +64,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">
-                        <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</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="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>
 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
@@ -67,16 +73,16 @@
                 </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">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</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="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>
+                    <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="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>

plumbing-repair.html

@@ -18,7 +18,13 @@
         .nav-link:hover {
             color: #10b981;
         }
-        .service-card:hover {
+        .group:hover .group-hover\\:block {
+            display: block;
+        }
+        .group .group-hover\\:block {
+            transition: opacity 0.2s ease-in-out;
+        }
+.service-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
@@ -58,8 +64,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">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</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="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="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
@@ -67,8 +73,8 @@
                 </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">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</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="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>

sump-pumps.html

@@ -18,7 +18,13 @@
         .nav-link:hover {
             color: #10b981;
         }
-        .service-card:hover {
+        .group:hover .group-hover\\:block {
+            display: block;
+        }
+        .group .group-hover\\:block {
+            transition: opacity 0.2s ease-in-out;
+        }
+.service-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
@@ -58,8 +64,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">
-                        <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</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="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>
                         <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
@@ -67,24 +73,24 @@
                 </div>
                 <div class="group relative">
                     <a href="#" class="nav-link text-gray-7极00 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">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</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="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>
+                    <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="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>
                 </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>
+                   极<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="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>

water-heaters.html

@@ -18,7 +18,13 @@
         .nav-link:hover {
             color: #10b981;
         }
-        .service-card:hover {
+        .group:hover .group-hover\\:block {
+            display: block;
+        }
+        .group .group-hover\\:block {
+            transition: opacity 0.2s ease-in-out;
+        }
+.service-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
@@ -58,8 +64,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">
-                        <a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</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="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>
 <a href="#" class="block px-4 py-2 text-gray-700 hover:极g-gray-100">All Services</a>
@@ -67,16 +73,16 @@
                 </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">
-                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</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="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>
+                    <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="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>