悬停“向右下拉”菜单

Posted 2023-03-07

【中文标题】悬停“向右下拉”菜单

【英文标题】：Hover "Drop Right" Menu

【发布时间】：2021-05-03 19:17:40

【问题描述】：

我正在尝试实现一个侧菜单，当您将鼠标悬停在其中一个项目上时，该菜单会展开一个项目“表格”。我正在使用 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;

期望的输出：

【参考方案1】：

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

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

【讨论】：

该示例使用引导程序。我正在寻找使用顺风的解决方案。

我的错，试试这个视频youtube.com/watch?v=IF6k0uZuypA&ab_channel=Fireship 花花公子副本的 facebooks 下拉菜单，它将向您展示它是如何完成的并且您可以学习。让我知道它是否有效