I’m working in tailwindcss while creating a navbar, The dropdown menu is not showing up here. Instead a scroll bar appears, and the contents are inside the navbar even though i have given absolute and z-index
Please someone help me with this one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menti Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap"
rel="stylesheet">
<script src="output.css"></script>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body style='font-family: "Poppins", sans-serif;'>
<nav class="flex justify-between items-center px-5 py-2 border z-10 ">
<div>Menti</div> <!-- Logo and Title-->
<div>
<div class="border border-gray-300 rounded-md px-3 py-2 justify-center items-center flex gap-3">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" class="outline-none border-0 w-80">
</div>
<!--Search-->
</div> <!-- Icons-->
<div>
<div class="flex gap-6">
<!-- Drop down start -->
<div class="dropdown relative">
<button class="px-6 py-1 rounded-md flex justify-center items-center gap-4">Know More
<i class="fa-solid fa-caret-down"></i>
</button>
<ul class="dropdown-content absolute z-40">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- Dropdown end -->
<button
class="border px-6 py-1 rounded-md bg-blue-700 text-white hover:bg-blue-800 transition-all duration-200 ease-in-out">Login</button>
</div> <!--Login-->
</div>
</nav>
<script>
</script>
</body>
</html>
Expecting : I should work be like normal dropdown box overlayed.
Output:
I tried giving relative to navbar, but it works the same. If I didn’t specify the relative parent, it is taking body as its relative parents, in that case, it hard to position the dropdown contents under the drop-down button.
1