@props(['title'])

<div x-data="{ openSub: false }" @mouseleave="openSub = false" class="relative group" >
    <div @mouseenter="openSub = true"
        class="px-4 py-2 hover:bg-gray-100 cursor-pointer font-semibold">
        {{ $title }}
    </div>
    <div x-show="openSub"
        class="absolute top-0 left-full mt-0 w-56 bg-white border rounded shadow-lg z-20">
        {{ $slot }}
    </div>
</div>