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 / 3.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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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>
See Also
Tailwind CSS Free Digital Agency Landing Page
TailFood – Free Tailwind CSS Restaurant Template
Tailwind CSS Real Estate Template
Tailwind CSS Simple Responsive Landing Page Template
Tailwind CSS Simple Verification Email Template
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
