CODEWITHSUNDEEP
htmlcssdrop-down-menutailwind-css
muataz thaaer
muataz thaaer

Reputation: 37

how to make dropdown menu in tailwindcss

please can any one tell me how to make dropdown menu in tailwind css i have tried everything but it does not work at all

`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    
    <div >
        <ul class="bg-blue-500 flex justify-end items-center pr-[150px] space-x-10 text-white relative">
            <li><a href="#" class="hover:bg-blue-400 hover:font-bold hover:rounded">Home</a></li>
            <li><a href="#" class="hover:bg-blue-400 hover:font-bold hover:rounded flex hover:block">Services</a>
                <div >
                    <ul class=" flex hidden absolute bg-red-600 w-20 pt-20">
                        <li><a href="#">Web Development</a></li>
                        <li><a href="#">Mobile Development</a></li>
                        <li><a href="#">Game Development</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="hover:bg-blue-400 hover:font-bold hover:rounded">About</a></li>
            <li><a href="#" class="hover:bg-blue-400 hover:font-bold hover:rounded">FAQ</a></li>
        </ul>

    </div>
</body>
</html>

`

Upvotes: 2

Views: 2804

Answers (2)

Girish Venkatachalam
Girish Venkatachalam

Reputation: 21

This is my code.

  <div class="relative group">
       <a class="text-md active:font-bold hover:text-blue-400 text-lg
text-center w-full no-underline sm:w-auto sm:pr-4 py-2 sm:py-1" >
    Dropdown
    </a>

     <div class="absolute z-10 hidden bg-grey-200 group-hover:block">
       <div class="px-2 pt-2 pb-4 bg-red-200 shadow-lg">
            <div class="dropdown-menu">
              <ul>
              <li><a href="/first" class=" dropdown-item">First </a></li>
              <li><a href="/second" class=" dropdown-item">Second </a></li>
              <li><a href="/third" class=" dropdown-item">Third </a></li>
              <li><a href="/fourth" class=" dropdown-item">Fourth </a></li>
              <ul>
            </div>
          </div>
      </div>
    </div>

You can find it in this playground

Upvotes: 2

Shashank Shandilya
Shashank Shandilya

Reputation: 106

You are missing javascript events to trigger the dorpdown I am guessing you are trying to work with flowbite check out their quick start doc, You can still do the native dropdown with css only like mentioned here

Upvotes: 1

Related Questions