title: Hover over dropdown with Alpine JS
body: <p>i wanna build a menu that is shown on mouseover and displays elements:
  category:
  - sub-category1
  - sub-category2</p>
  <p>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.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;div x-data=&quot;{open: false}&quot;&gt;
      &lt;button @mouseover=&quot;open = true&quot;&gt;Category&lt;/button&gt;
      &lt;div x-show=&quot;open&quot; @mouseout=&quot;open = false&quot; class=&quot;h-80 bg-red-900&quot;&gt;
          &lt;ul&gt;
              &lt;li&gt;Sub-category 1&lt;/li&gt;
              &lt;li&gt;Sub-category 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>