Hover over dropdown with Alpine JS

Question

i wanna build a menu that is shown on mouseover and displays elements: category: - sub-category1 - sub-category2

I managed to accomplish that, but my problem is that when i hover over the menu and it shows the elements inside and i move the mouse away from the menu itself, the elements dont hide.

Here is my code:

<div x-data="{open: false}">
    <button @mouseover="open = true">Category</button>
    <div x-show="open" @mouseout="open = false" class="h-80 bg-red-900">
        <ul>
            <li>Sub-category 1</li>
            <li>Sub-category 2</li>
        </ul>
    </div>
</div>

Answer 1

use @mouseover.away = "open = false" on the outside div