使用AlpineJS将鼠标悬停在下拉菜单上

我想构建一个在鼠标悬停时显示并显示元素的菜单：类别：-子类别1-子类别2

我设法做到了这一点，但我的问题是，当我将鼠标悬停在菜单上并显示里面的元素并且我将鼠标移离菜单本身时，元素不会隐藏。

这是我的代码：

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

回答