<div x-data="{ isOpen: false }" class="relative inline-block">
    <!-- ปุ่มเปิด/ปิด Dropdown -->
    <button @click="isOpen = !isOpen" class="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Menu
    </button>

    <!-- Dropdown Menu -->
    <div 
        x-show="isOpen" 
        class="absolute mt-2 w-48 bg-white shadow-lg rounded border"
        @click.away="isOpen = false"
        x-transition>
        <ul>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 1</li>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 2</li>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 3</li>
        </ul>
    </div>
</div>

<div x-data="{ isOpen: false }" class="relative inline-block">
    <button @click="isOpen = !isOpen" class="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Menu
    </button>

    <div 
        x-show="isOpen" 
        class="absolute mt-2 w-48 bg-white shadow-lg rounded border"
        @click.away="isOpen = false"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90">
        <ul>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 1</li>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 2</li>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 3</li>
        </ul>
    </div>
</div>

<div x-data="{ isOpen: false, selected: 'Select an option' }" class="relative inline-block">
    <button @click="isOpen = !isOpen" class="px-4 py-2 bg-blue-500 text-white rounded">
        <span x-text="selected"></span>
    </button>

    <div 
        x-show="isOpen" 
        class="absolute mt-2 w-48 bg-white shadow-lg rounded border"
        @click.away="isOpen = false"
        x-transition>
        <ul>
            <li @click="selected = 'Option 1'; isOpen = false" class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 1</li>
            <li @click="selected = 'Option 2'; isOpen = false" class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 2</li>
            <li @click="selected = 'Option 3'; isOpen = false" class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 3</li>
        </ul>
    </div>
</div>

<div x-data="{ isOpen: false, subMenuOpen: false }" class="relative inline-block">
    <button @click="isOpen = !isOpen" class="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Menu
    </button>

    <div 
        x-show="isOpen" 
        class="absolute mt-2 w-48 bg-white shadow-lg rounded border"
        @click.away="isOpen = false"
        x-transition>
        <ul>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Main Option 1</li>
            <li 
                @click="subMenuOpen = !subMenuOpen" 
                class="px-4 py-2 hover:bg-gray-100 cursor-pointer relative">
                Main Option 2
                <div 
                    x-show="subMenuOpen" 
                    class="absolute left-full top-0 mt-0 ml-2 w-48 bg-white shadow-lg rounded border"
                    x-transition>
                    <ul>
                        <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Sub Option 1</li>
                        <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Sub Option 2</li>
                    </ul>
                </div>
            </li>
            <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Main Option 3</li>
        </ul>
    </div>
</div>

<div x-data="{ isOpen: false, options: [], fetchOptions() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => { this.options = data; });
    } }" x-init="fetchOptions" class="relative inline-block">
    <button @click="isOpen = !isOpen" class="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Menu
    </button>

    <div 
        x-show="isOpen" 
        class="absolute mt-2 w-48 bg-white shadow-lg rounded border"
        @click.away="isOpen = false"
        x-transition>
        <ul>
            <template x-for="option in options" :key="option.id">
                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer" x-text="option.name"></li>
            </template>
        </ul>
    </div>
</div>