子菜单的位置（对齐：居中？）和自定义宽度

Question

我想使用 tailwindcss 创建一个下拉菜单。菜单的宽度应为 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 的事情，但在这种情况下，在导航栏中居中的菜单元素也不会将其菜单居中。所以子菜单应该尽可能居中。

所以我的问题是：我怎样才能让它像这个小草图一样工作？

Answer 1

以下是我如何设置不同对齐的下拉列表：

https://codepen.io/forloops/pen/QWpKELQ

两者之间的主要区别是：

左 class: left-0
中心 classes: md:left-1/2 md:-translate-x-1/2
右class:right-0

您可以在具有以下元素的元素上找到这些 classes：data-ref='check this element class'

请注意：此示例使用 AlpineJS 和 Tailwind CSS v2

子菜单的位置（对齐：居中？）和自定义宽度

Position of submenu (align: middle?) and custom width

html

css

tailwind-css