<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul x-show="open" @click.away="open = false" style="background:#f1f1f1;">
        Dropdown Body
    </ul>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js