Cant get a dropdown to appear below the clicked nav item

[finchy70]

I have a dropdown which works fine but wont appear directly below the clicked nav option.

As you can see the dropdown is below the VIP button but the button clicked was the More Services button.

I have the More Services in a div with a class relative and the dropdown is absolute.

<nav class="flex space-x-10 justify-between">
    <div>
        <a class="font-medium text-base leading-6 text-white hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150" href="{{ $page->baseUrl }}/events">
            <span class="{{ $page->selected('events') }} cursor-pointer">Event Hire</span>
        </a>
    </div>
    <div>
        <a class="text-white group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150" href="{{ $page->baseUrl }}/vip">
            <span class="{{ $page->selected('vip') }} cursor-pointer">VIP</span>
        </a>
    </div>
    <div class="relative">
        <a x-on:click="open = !open" class="text-white group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
            <span class="cursor-pointer">More Services</span>
        </a>
    </div>
    <div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state."
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="transform opacity-0 scale-95"
                     x-transition:enter-end="transform opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75"
                     x-transition:leave-start="transform opacity-100 scale-100"
                     x-transition:leave-end="transform opacity-0 scale-95"
                     class="absolute left-75 top-20 w-48 rounded-md shadow-lg z-30">
        <div x-on:click.away="open = false" class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
            <a href="/" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Home</a>
            <a href="/contruction" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Construction</a>
            <a href="/showers" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Shower Units</a>
            <a href="/storage" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Storage</a>
        </div>
    </div>
</nav>

I could use top and right to align but the relative div should be the reference for the positioning of the absolute dropdown shouldn't it?

Any help would be appreciated.
Thanks

[estevanmaito]

I indented it better so you can see what is going on:

<div class="relative">
    <a x-on:click="open = !open" class="text-white group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
        <span class="cursor-pointer">More Services</span>
    </a>
</div> <!-- 👈 this is the end of the relative div -->
<!-- 👇 this is outside of the relative div, and is treated like the other nav links -->
<div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state."
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="transform opacity-0 scale-95"
                 x-transition:enter-end="transform opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="absolute left-75 top-20 w-48 rounded-md shadow-lg z-30">
    <div x-on:click.away="open = false" class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <a href="/" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Home</a>
        <a href="/contruction" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Construction</a>
        <a href="/showers" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Shower Units</a>
        <a href="/storage" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Storage</a>
    </div>
</div>

Move the dropdown div up, inside the relative div and it will work.

[finchy70]

That did the trick. Thank you.