悬停 "Drop Right" 菜单

Question

我正在尝试实现一个侧边菜单，当您将鼠标悬停在其中一个项目上时，该菜单会展开“table”个项目。我正在使用 TailwindCSS 和 React。

我面临的问题是 当我将鼠标悬停在按钮上时菜单没有展开。

我已将子菜单设为按钮的子菜单，以便我可以使用组悬停功能，但它不起作用。我已经将 display: ['hover', 'focus'] 添加到变体配置中，所以，这不是问题所在。

// SideMenuItem.js

import React from "react";

function SideMenuItem() {
  return (
    <button className="group static m-2 w-16 h-16 bg-red-400"> A
    
      <div className="hidden group-hover:block relative top-0 left-24 w-48 z-10 flex flex-row flex-wrap bg-gray-300">
        <button className="m-2 h-16 w-16 bg-gray-200">Item 1</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 2</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 3</button>
      </div>
    </button>
  );
}

export default SideMenuItem;

期望的输出：

Answer 1

我从一篇文章中找到了这个代码示例。 https://codesandbox.io/s/59574892-so-n-number-of-dropdowns-9hkt3

试着理解这个人做了什么，然后自己写。祝你好运！

悬停 "Drop Right" 菜单

Hover "Drop Right" Menu

html

javascript

css

frontend

tailwind-css