如何用Tailwind CSS制作下拉菜单？现有代码无法正常工作求助

你的代码里有几个关键问题导致下拉菜单无法正常工作，下面是修正后的实现和对应的说明：

核心问题与修复点 #

• 定位错误：下拉菜单的父元素（Services的<li>）需要设置relative，否则绝对定位的下拉框会相对于整个页面而不是父元素定位
• 显示逻辑缺失：需要通过group类和group-hover:block实现hover父元素时显示下拉菜单的效果
• 布局错误：下拉菜单的列表应该垂直排列，而不是默认的水平布局；同时pt-20会导致下拉框位置严重偏移，需调整为合适的内边距
• 交互优化：给父元素的链接添加内边距，让hover和点击区域更合理

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div>
        <ul class="bg-blue-500 flex justify-end items-center pr-[150px] space-x-10 text-white">
            <li><a href="#" class="block px-4 py-2 hover:bg-blue-400 hover:font-bold hover:rounded">Home</a></li>
            <!-- 添加group类与relative定位 -->
            <li class="group relative">
                <a href="#" class="block px-4 py-2 hover:bg-blue-400 hover:font-bold hover:rounded">Services</a>
                <!-- 通过group-hover控制下拉框显示 -->
                <ul class="hidden absolute top-full left-0 bg-red-600 w-48 py-2">
                    <li><a href="#" class="block px-4 py-2 hover:bg-red-700">Web Development</a></li>
                    <li><a href="#" class="block px-4 py-2 hover:bg-red-700">Mobile Development</a></li>
                    <li><a href="#" class="block px-4 py-2 hover:bg-red-700">Game Development</a></li>
                </ul>
            </li>
            <li><a href="#" class="block px-4 py-2 hover:bg-blue-400 hover:font-bold hover:rounded">About</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-blue-400 hover:font-bold hover:rounded">FAQ</a></li>
        </ul>
    </div>
</body>
</html>

关键修改说明 #

1. 给Services的<li>添加group relative：relative确保下拉框相对于父元素定位，group允许通过group-hover控制子元素状态
2. 下拉菜单设置top-full left-0：让下拉框刚好出现在父元素的正下方
3. 调整下拉菜单宽度为w-48：保证菜单内容能完整显示
4. 给所有链接添加block px-4 py-2：让链接的交互区域铺满整个列表项，提升操作体验
5. 用group-hover:block替代固定的hidden：实现hover父元素时自动显示下拉菜单的逻辑

内容的提问来源于stack exchange，提问作者muataz thaaer