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>