Question

Я хотел бы создать выпадающее меню, используя попутный ветер css. Предполагается, что меню имеет ширину w-3/5, и его родительский элемент меню должен располагаться по центру вправо.

Я создал кодовый блок, чтобы продемонстрировать это: https://codepen.io/spqrinc/pen/Exjympz

Это фрагмент:

<div class="group">
    <div class="lg:relative w-full">
        <button class="mt-1 block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700 md:mt-0 md:ml-2 inline-flex items-center justify-between w-full">
            <span class="mr-24">Test</span>
        </button>
    </div>
    <ul class="lg:absolute m-1 mt-4 w-3/5">
        <div class="bg-gray-500 text-white w-full px-2 pt-2 pb-4 group-hover">
            <li class="">
                <a
                        class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
                        href="#">One</a>
            </li>
            <li class="">
                <a class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
                   href="#">Two</a>
            </li>
            <li class="">
                <a
                        class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
                        href="#">Three</a>
            </li>
        </div>
    </ul>
</div>

Как видите, подменю видно, но оно не центрировано под родительским элементом. Большая часть его ширины не видна.

Конечно, я мог бы сделать что-то вроде left-0 или right-0, но в этом случае элементы меню, которые центрированы на панели навигации, не имеют центрированного меню, тоже. Поэтому подменю всегда следует центрировать, если это возможно.

Итак, мой вопрос: как я могу заставить это работать, как в этом небольшом наброске?