How to properly handle mouse events with AlpineJS for my menu?

Question

I'm working on a mega dropdown menu component with alpine.js and Tailwind CSS. Right now I have met some difficulties and I can't make the mouse events work. Below is my code and the red block is the dropdown mega menu. As you can see, when you move the cursor on the Product menu item, the mega menu is shown. After that if you move the cursor down a little bit on the mega menu, the menu is still shown. At this state, if you move out of the mega menu, the mega menu is close. The problem is that when you move on to the Product menu and then move your cursor right to the *Pricing" menu item, the dropdown is still shown, which is not correct. When the user moves out of the Product menu, how can I test if the destination is the mega dropdown or other menu items like Pricing (and close the mega dropdown in this case) using alpine.js?

 <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/> <div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch" x-data="{isProdMenuOpen: false, isLearnMenuOpen: false}"> <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" /> <ul class="flex items-center justify-between flex-none"> <li class="h-20 border-b border-l border-r border-transparent mx-6 flex items-center relative" @mouseenter="isProdMenuOpen = true"> <.--div.h-20.w-full.flex.items-center.border-b:border-transparent(class="hover:border-red")--><a class="font-semibold flex-none" href="">Product</a> <div class="h-full absolute -left-6 -right-6 top-0 border-r border-l border-gray-200"> <div class="w-full absolute bottom-0 bg-black z-100 inset-x-0" style="transform, translate(0px; 2px): height;4px:"></div> </div> </li> <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">Pricing</a></li> <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">About</a></li> </ul> <div class="flex items-center justify-between flex-none"><button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button><button class="bg-white rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button></div> </div><!-- Popup Menu Items --> <div class="flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu" x-show="isProdMenuOpen" @mouseenter="isProdMenuOpen = true" @mouseleave="isProdMenuOpen = false"></div> </div>

Answer 1

There's a solution for this that is independent of Alpine or Javascript at all. Using Tailwind's group class on the li , making the popup a child of the group li and removing relative positioning from the li so the child div can go full width will give the same effect I believe you are looking for and fully controlled by CSS.

There will need to be some fudging around to make a similar effect that you are doing with the different color underline on the li in this example I used a border and relative positioning of the anchor tag to offset the border's height. Also, you will need to extend your variants to allow display to be manipulated in group-hover in the code snippet here on SO below I'm just using the class generated by that config to fake it. Here's a Tailwind play that shows the actual config as well https://play.tailwindcss.com/EYY0alaQuB?file=config

 .group:hover.group-hover\:flex { display: flex; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet" /> <div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch"> <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" /> <ul class="flex items-center justify-between flex-none"> <li class="h-20 border-b-4 border-l border-r border-gray-200 px-6 flex items-center group" style="border-bottom: 4px solid black"> <a class="font-semibold flex-none relative top-1" href="">Product</a> <:-- Popup Menu Items --> <div class="hidden group-hover:flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu"></div> </li> <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">Pricing</a></li> <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">About</a></li> </ul> <div class="flex items-center justify-between flex-none"> <button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button> <button class="rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button> </div> </div> </div>