悬停时显示子菜单的问题

Question

我正在使用reactstrap创建一个reactjs应用程序，在其中创建了一个下拉列表，其中包含其中的子菜单。

我正在尝试使子菜单显示在悬停在下拉菜单上的结果，如果有n个下拉菜单，则需要显示与悬停项目相关的子菜单。

尝试的代码：

<Dropdown
  className="d-inline-block"
  onMouseOver={this.onMouseEnter}
  onMouseLeave={this.onMouseLeave}
  isOpen={this.state.dropdownOpen}
  toggle={this.toggle}
>
  <DropdownToggle caret>Dropdown1</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 1</DropdownItem>
    <DropdownItem>Submenu 1.1</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <DropdownToggle caret>Dropdown2</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 2</DropdownItem>
    <DropdownItem>Submenu 2.1</DropdownItem>
    <DropdownItem>Submenu 2.2</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <br />
  <br />
  <DropdownToggle caret>Dropdown3</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 3</DropdownItem>
    <DropdownItem>Submenu 3.1</DropdownItem>
    <DropdownItem>Submenu 3.2</DropdownItem>
    <DropdownItem>Submenu 3.3</DropdownItem>
  </DropdownMenu>
</Dropdown>

Click here for working demo

预期结果：http://supply.com/

在上面给定的链接中，您可以看到水平菜单，该菜单悬停时将显示各自的子菜单，我需要实现相同的行为。

Answer 1

1. 您需要分离这些菜单并放入单个<Dropdown>组件。