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

【问题标题】：Position of submenu (align: middle?) and custom width子菜单的位置（对齐：中间？）和自定义宽度
【发布时间】：2021-06-09 21:16:08
【问题描述】：

我想使用 tailwindcss 创建一个下拉菜单。菜单的宽度应该是w-3/5，并且应该在它的父菜单元素下居中。

我创建了一个代码笔来演示这一点：https://codepen.io/spqrinc/pen/Exjympz

这是sn-p：

<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 之类的操作，但在这种情况下，导航栏中居中的菜单元素也不会居中。因此，如果可能，子菜单应始终居中。

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

【问题讨论】：

建议：使用bootstrap drop-down menu
这是引导程序。我正在使用 Tailwindcss，我不想混淆这些东西。
好吧，您需要进行大量自定义，然后使用框架来轻松解决问题，正如我在 Tailwindcss 组件中看到的那样，没有可用的下拉组件

标签： html css tailwind-css

【解决方案1】：

这是我设置不同对齐下拉菜单的方法：

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

两者之间的主要区别是：

左班：left-0
中心课程：md:left-1/2 md:-translate-x-1/2
正确的类：right-0

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

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

【讨论】：