Javascript 当光标悬停时，如何使子菜单出现在每个菜单上？

我正在使用react.js实现下拉菜单。我正在看教程并应用它，但我添加了另一个带有子菜单的菜单，但它不能按我所希望的那样工作。我希望在将光标放在每个菜单上时显示子菜单。但是，当我将鼠标悬停在某个菜单上时，将显示所有菜单的子菜单。 我认为道具有问题。但我不知道如何修复它。如果你能帮助我，我将非常感激

class Gnb extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showAboutMenu: false
      };
    }

    handleHover = (event) => {
      this.setState({ showAboutMenu: true });
    };

    handleLeave = (event) => {
      this.setState({ showAboutMenu: false });
    };

    render() {
      return (
          <div id="menu-container">
        <nav className="nav">
          <ul className="nav__menu">
            <li>...</li>
            <li className="nav__menu-item" onMouseLeave={this.handleLeave}>
              <Link onMouseEnter={this.handleHover} className="a">
                요일별
              </Link>
              <div className="submenu-container">
                  { this.state.showAboutMenu && <Submenu_day /> }
              </div>
            </li>

            <li className="nav__menu-item" onMouseLeave={this.handleLeave}>
              <Link onMouseEnter={this.handleHover} className="a">
                장르별
              </Link>
              <div className="submenu-container">
                  { this.state.showAboutMenu && <Submenu_genre /> }
              </div>
            </li>
            <li>...</li>
          </ul>
        </nav></div>

类Gnb扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
Showabout菜单：false
};
}
handleHover=（事件）=>{
this.setState（{showAboutMenu:true}）；
};
handleLeave=（事件）=>{
this.setState（{showAboutMenu:false}）；
};
render（）{
返回(


onMouseLeave={this.handleLeave}>
요일별
{this.state.showAboutMenu&}

onMouseLeave={this.handleLeave}>
장르별
{this.state.showAboutMenu&}

这是

const子菜单\u流派=（道具）=>(

{genres.map（（流派，索引）=>(

{genre.name}

)
)}

)

这是一个关于问题的屏幕截图

---

我只希望出现红色圆圈…

它们都向下移动，因为它们都引用了相同的状态属性，因此：

 { this.state.showAboutMenu && <Submenu_genre /> }

{this.state.showAboutMenu&}

及

{this.state.showAboutMenu&}

两个都将在

this.state.showAboutMenu

---

是

true

而不管它们是否单独悬停。

您只需为以下代码编写新的handleHover和handleLeave

<div className="submenu-container">
              { this.state.showAboutMenu && <Submenu_genre /> }
          </div>

{this.state.showAboutMenu&}

您的showAboutMenu=true 是打开子菜单的原因

 { this.state.showAboutMenu && <Submenu_day /> }

<div className="submenu-container">
              { this.state.showAboutMenu && <Submenu_genre /> }
          </div>