You can use JavaScript to query your dropdown and then add a click event listener.
const dropdownButton = document.querySelector("#dropdown");
const dropdownList = document.querySelector("#dropdown + div.hidden");
dropdownButton.addEventListener("click", () => {
dropdownList.classList.toggle("hidden");
});
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="group">
<span class="font-bold text-gray-700" id="dropdown">Admission</span>
<div class=" hidden group-hover:block bg-white w-auto">
<div class="p-3 hover:bg-gray-200 ">
Admission Process
</div>
<div class="p-3 hover:bg-gray-200">
option 1
</div>
<div class="p-3 hover:bg-gray-200">
option 2
</div>
</div>
</div>
Multiple dropdowns
If you want to apply the same code to multiple dropdowns, replace the dropdown id with a CSS class like this (assuming all dropdown structures are identical):
<div class="group dropdown">
<span class="font-bold text-gray-700">Admission</span>
<div class=" hidden group-hover:block bg-white w-auto">
<div class="p-3 hover:bg-gray-200 ">
Admission Process
</div>
<div class="p-3 hover:bg-gray-200">
option 1
</div>
<div class="p-3 hover:bg-gray-200">
option 2
</div>
</div>
</div>
Then loop through each dropdown to add event listeners:
const dropdowns = document.querySelectorAll(".dropdown");
dropdowns.forEach(dropdown => {
dropdown.querySelector('span').addEventListener("click", () => {
dropdown.querySelector('span + div').classList.toggle('hidden');
});
});