<!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">
<!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>
</body>
</html>
okay so the problem i am facing is easy for most of the people i am stuck on it for past 6-7 hours.
so i tried the group-hover:block too but still when i hover over the solution and resources, it’s not showing the dropdown menu, help me out guys, its urgent!!!
New contributor
Abhishek Suhag is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.