make the menus able to stay up when hovering for easier menu navigation
Browse files- index.html +13 -7
- plumbing-repair.html +11 -5
- sump-pumps.html +15 -9
- water-heaters.html +13 -7
index.html
CHANGED
|
@@ -18,7 +18,13 @@
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
transform: translateY(-5px);
|
| 23 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 24 |
}
|
|
@@ -58,8 +64,8 @@
|
|
| 58 |
<div class="hidden md:flex space-x-8">
|
| 59 |
<div class="group relative">
|
| 60 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 61 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 62 |
-
|
| 63 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 64 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 65 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
@@ -67,16 +73,16 @@
|
|
| 67 |
</div>
|
| 68 |
<div class="group relative">
|
| 69 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 70 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 71 |
-
|
| 72 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 73 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 74 |
</div>
|
| 75 |
</div>
|
| 76 |
<div class="group relative">
|
| 77 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 78 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 79 |
-
|
| 80 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 81 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 82 |
</div>
|
|
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
+
.group:hover .group-hover\\:block {
|
| 22 |
+
display: block;
|
| 23 |
+
}
|
| 24 |
+
.group .group-hover\\:block {
|
| 25 |
+
transition: opacity 0.2s ease-in-out;
|
| 26 |
+
}
|
| 27 |
+
.service-card:hover {
|
| 28 |
transform: translateY(-5px);
|
| 29 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 30 |
}
|
|
|
|
| 64 |
<div class="hidden md:flex space-x-8">
|
| 65 |
<div class="group relative">
|
| 66 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 67 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 68 |
+
<a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
|
| 69 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 70 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 71 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
|
|
| 73 |
</div>
|
| 74 |
<div class="group relative">
|
| 75 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 76 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2极 w-48 z-50 transition-opacity duration-200">
|
| 77 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
|
| 78 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 79 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 80 |
</div>
|
| 81 |
</div>
|
| 82 |
<div class="group relative">
|
| 83 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 84 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 85 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Furnace Repair</a>
|
| 86 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 87 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 88 |
</div>
|
plumbing-repair.html
CHANGED
|
@@ -18,7 +18,13 @@
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
transform: translateY(-5px);
|
| 23 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 24 |
}
|
|
@@ -58,8 +64,8 @@
|
|
| 58 |
<div class="hidden md:flex space-x-8">
|
| 59 |
<div class="group relative">
|
| 60 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 61 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 62 |
-
|
| 63 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 64 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 65 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
@@ -67,8 +73,8 @@
|
|
| 67 |
</div>
|
| 68 |
<div class="group relative">
|
| 69 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 70 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 71 |
-
|
| 72 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 73 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 74 |
</div>
|
|
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
+
.group:hover .group-hover\\:block {
|
| 22 |
+
display: block;
|
| 23 |
+
}
|
| 24 |
+
.group .group-hover\\:block {
|
| 25 |
+
transition: opacity 0.2s ease-in-out;
|
| 26 |
+
}
|
| 27 |
+
.service-card:hover {
|
| 28 |
transform: translateY(-5px);
|
| 29 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 30 |
}
|
|
|
|
| 64 |
<div class="hidden md:flex space-x-8">
|
| 65 |
<div class="group relative">
|
| 66 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 67 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 68 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
|
| 69 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 70 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 71 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
|
|
| 73 |
</div>
|
| 74 |
<div class="group relative">
|
| 75 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 76 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 77 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
|
| 78 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 79 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 80 |
</div>
|
sump-pumps.html
CHANGED
|
@@ -18,7 +18,13 @@
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
transform: translateY(-5px);
|
| 23 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 24 |
}
|
|
@@ -58,8 +64,8 @@
|
|
| 58 |
<div class="hidden md:flex space-x-8">
|
| 59 |
<div class="group relative">
|
| 60 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 61 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 62 |
-
|
| 63 |
<a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 64 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 65 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
@@ -67,24 +73,24 @@
|
|
| 67 |
</div>
|
| 68 |
<div class="group relative">
|
| 69 |
<a href="#" class="nav-link text-gray-7极00 hover:text-green-600 font-medium">Drains</a>
|
| 70 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 71 |
-
|
| 72 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray极-100">Sewer Line Repair</a>
|
| 73 |
极 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 74 |
</div>
|
| 75 |
</div>
|
| 76 |
<div class="group relative">
|
| 77 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 78 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 79 |
-
|
| 80 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 81 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 82 |
</div>
|
| 83 |
</div>
|
| 84 |
<div class="group relative">
|
| 85 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Cooling</a>
|
| 86 |
-
|
| 87 |
-
|
| 88 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Mini-Splits</a>
|
| 89 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Maintenance</a>
|
| 90 |
</div>
|
|
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
+
.group:hover .group-hover\\:block {
|
| 22 |
+
display: block;
|
| 23 |
+
}
|
| 24 |
+
.group .group-hover\\:block {
|
| 25 |
+
transition: opacity 0.2s ease-in-out;
|
| 26 |
+
}
|
| 27 |
+
.service-card:hover {
|
| 28 |
transform: translateY(-5px);
|
| 29 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 30 |
}
|
|
|
|
| 64 |
<div class="hidden md:flex space-x-8">
|
| 65 |
<div class="group relative">
|
| 66 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 67 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 68 |
+
<a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
|
| 69 |
<a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 70 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 71 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Services</a>
|
|
|
|
| 73 |
</div>
|
| 74 |
<div class="group relative">
|
| 75 |
<a href="#" class="nav-link text-gray-7极00 hover:text-green-600 font-medium">Drains</a>
|
| 76 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 77 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
|
| 78 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray极-100">Sewer Line Repair</a>
|
| 79 |
极 <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 80 |
</div>
|
| 81 |
</div>
|
| 82 |
<div class="group relative">
|
| 83 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 84 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 85 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Furnace Repair极</a>
|
| 86 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 87 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 88 |
</div>
|
| 89 |
</div>
|
| 90 |
<div class="group relative">
|
| 91 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Cooling</a>
|
| 92 |
+
极<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 93 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">AC Repair</a>
|
| 94 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Mini-Splits</a>
|
| 95 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Maintenance</a>
|
| 96 |
</div>
|
water-heaters.html
CHANGED
|
@@ -18,7 +18,13 @@
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
transform: translateY(-5px);
|
| 23 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 24 |
}
|
|
@@ -58,8 +64,8 @@
|
|
| 58 |
<div class="hidden md:flex space-x-8">
|
| 59 |
<div class="group relative">
|
| 60 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 61 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 62 |
-
|
| 63 |
<a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 64 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 65 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:极g-gray-100">All Services</a>
|
|
@@ -67,16 +73,16 @@
|
|
| 67 |
</div>
|
| 68 |
<div class="group relative">
|
| 69 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 70 |
-
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50">
|
| 71 |
-
|
| 72 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 73 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 74 |
</div>
|
| 75 |
</div>
|
| 76 |
<div class="group relative">
|
| 77 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 78 |
-
<div class="absolute hidden group-hover
|
| 79 |
-
|
| 80 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 81 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 82 |
</div>
|
|
|
|
| 18 |
.nav-link:hover {
|
| 19 |
color: #10b981;
|
| 20 |
}
|
| 21 |
+
.group:hover .group-hover\\:block {
|
| 22 |
+
display: block;
|
| 23 |
+
}
|
| 24 |
+
.group .group-hover\\:block {
|
| 25 |
+
transition: opacity 0.2s ease-in-out;
|
| 26 |
+
}
|
| 27 |
+
.service-card:hover {
|
| 28 |
transform: translateY(-5px);
|
| 29 |
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 30 |
}
|
|
|
|
| 64 |
<div class="hidden md:flex space-x-8">
|
| 65 |
<div class="group relative">
|
| 66 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Plumbing</a>
|
| 67 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 68 |
+
<a href="plumbing-repair.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Plumbing Repair</a>
|
| 69 |
<a href="water-heaters.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Water Heaters</a>
|
| 70 |
<a href="sump-pumps.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sump Pumps</a>
|
| 71 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:极g-gray-100">All Services</a>
|
|
|
|
| 73 |
</div>
|
| 74 |
<div class="group relative">
|
| 75 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Drains</a>
|
| 76 |
+
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 77 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Drain Clearing</a>
|
| 78 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sewer Line Repair</a>
|
| 79 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Rooter Services</a>
|
| 80 |
</div>
|
| 81 |
</div>
|
| 82 |
<div class="group relative">
|
| 83 |
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Heating</a>
|
| 84 |
+
<div class="absolute hidden group-hover:极block bg-white shadow-lg rounded-md mt-2 w-48 z-50 transition-opacity duration-200">
|
| 85 |
+
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Furnace Repair</a>
|
| 86 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Boiler Services</a>
|
| 87 |
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Heat Pumps</a>
|
| 88 |
</div>
|