Tailwind CSS Dropdowns (Menu) on Hover Example

In this tutorial, we will see tailwind css dropdowns menu on hover, dropdowns hover with transition effect, dropdown hover duration with alpine js & tailwind css, dropdowns on hover in Icon menu, how to use mouseover in alpine js ,example with Tailwind CSS.


Tool Use

Tailwind CSS 2.x

Heroicons Icons

Alpine Js v3



Example 1

Tailwind CSS simple dropdowns on hover with alpine js 3

<!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>Tailwind CSS Dropdowns Menu on Hover Example</title>
    <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>

  <div class="container flex justify-center mx-auto mt-20">
    <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
      <!-- Dropdown toggle button -->
      <button
        @mouseover="open = true"
        class="flex items-center block p-2 bg-white bg-gray-100 rounded-md"
      >
        <span class="mr-4">Dropdown Button</span>
        <svg
          class="w-6 h-6 text-white text-gray-800"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>

      <!-- Dropdown menu -->
      <div
        x-show="open"
        class="absolute right-0 w-48 py-2 mt-2 bg-gray-100 rounded-md shadow-xl"
      >
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
        >
          Dropdown List 1
        </a>
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
        >
          Dropdown List 2
        </a>
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
        >
          Dropdown List 3
        </a>
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
        >
          Dropdown List 4
        </a>
      </div>
    </div>
  </div>
</html>



Example 2 (recommended)

Tailwind CSS Duration Transition Dropdowns on Hover with Alpine js v3.

<!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>Tailwind CSS Duration Transition Dropdowns menu on Hover with Alpine js v3 </title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
  </head>
  <body>
    <div class="container flex justify-center mx-auto">
        <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
            <!-- Dropdown toggle button -->
            <button @mouseover="open = true" class="flex items-center block p-2 bg-white bg-gray-100 rounded-md ">
                <span class="mr-4">Dropdown Hover</span>
                <svg class="w-6 h-6 text-white text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd" />
                </svg>
            </button>

            <!-- Dropdown menu -->
            <div x-show="open"
            x-transition:enter.duration.500ms
            x-transition:leave.duration.800ms
            class="absolute right-0 w-48 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl">
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 1
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 2
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 3
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 4
                </a>
            </div>
        </div>
    </div>
  </body>

  
</html>


Example 3

Tailwind CSS Duration Transition Dropdowns on Top Hover with Alpine js v3

<!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>Tailwind CSS Transition Dropdowns menu on sart top Hover with Alpine js v3 </title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
  </head>
  <body>
      
    <div class="container flex justify-center mx-auto">
        <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
            <!-- Dropdown toggle button -->
            <button @mouseover="open = true" class="flex items-center block p-2 bg-white bg-gray-100 rounded-md ">
                <span class="mr-4">Dropdown Hover</span>
                <svg class="w-6 h-6 text-white text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd" />
                </svg>
            </button>

            <!-- Dropdown menu -->
            <div x-show="open"
            x-transition.scale.origin.top
            class="absolute right-0 w-48 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl">
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 1
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 2
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 3
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 4
                </a>
            </div>
        </div>
    </div>
  </body>
</html>


Example 4

Tailwind CSS Transition Icon Dropdowns on left Hover with Alpine js v3

<!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>Tailwind CSS Transition Dropdown Icons on Hover with Alpine js v3 </title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
  </head>
  <body>
      

    <div class="container flex justify-center mx-auto">
        <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
            <!-- Dropdown toggle button -->
            <button @mouseover="open = true" class="block p-2 bg-white bg-gray-100 rounded-md ">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>

            </button>

            <!-- Dropdown menu -->
            <div
            x-show="open"
            x-transition.scale.origin.right
            class="absolute right-0 w-48 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl">
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 1
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 2
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 3
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 4
                </a>
            </div>
        </div>
    </div>
  </body>

</html>


Example 5 (recommended)

Tailwind CSS Transition Dropdowns on left Hover with Alpine js v3. Also use opacity, ease in out, duration hover, scale etc..

<!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>Tailwind CSS Transition Dropdownst  Hover with Alpine js v3 </title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
  </head>
  <body>
    <div class="container flex justify-center mx-auto">
        <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
            <!-- Dropdown toggle button -->
            <button @mouseover="open = true" class="flex items-center block p-2 bg-white bg-gray-100 rounded-md ">
                <span class="mr-4">Dropdown Button</span>
                <svg class="w-6 h-6 text-white text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd" />
                </svg>
            </button>

            <!-- Dropdown menu -->
            <div x-show="open"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-90"
                x-transition:enter-end="opacity-100 transform scale-100"
                x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 transform scale-100"
                x-transition:leave-end="opacity-0 transform scale-90"
            class="absolute right-0 w-48 py-2 mt-2 bg-gray-100 rounded-md shadow-xl">
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 1
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 2
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 3
                </a>
                <a href="#"
                    class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                    Dropdown List 4
                </a>
            </div>
        </div>
    </div>
  </body>

  
</html>