Question posted in 
I tried the group-hover:block too but still when I hover over the solution and resources, it’s not showing the dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Front Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-slate-600">
<nav class="bg-white text-black h-12 flex items-center justify-between px-4">
<div class="text-lg font-semibold">ABC Enterprises</div>
<ul class="flex items-center space-x-4">
<li class="relative group">
<a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a>
<div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block">
<a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a>
</div>
</li>
<li class="relative group">
<a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a>
<div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block">
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a>
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a>
</div>
</li>
<li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li>
<li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li>
<li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li>
</ul>
</nav>
</body>
</html>
2
Answers
There are no class define for
group-hover:blockin version 2.0.0 you need to upgrade with new version on Tailwind. As I have added new link of Tailwind<script src="https://cdn.tailwindcss.com"></script>You are using an incorrect CDN. Go through the Tailwind CSS docs here.
Just replace this
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">with this<script src="https://cdn.tailwindcss.com"></script>and your code should work just fine. Apply the same logic to all other list items.