React导航栏子菜单hover显示后保持可见的实现问题

问题根源 #

你的子菜单.subNav使用了position: fixed，这会让它脱离父元素<li>的布局流。当鼠标从父导航项移到子菜单时，父<li>的hover状态会立即丢失，导致子菜单被隐藏，无法点击内部选项。

方案一：纯CSS调整定位（推荐） #

将子菜单的定位方式改为absolute，同时给父<li>设置相对定位，让子菜单始终处于父元素的hover范围内：

修改后的CSS关键代码 #

.navbar > ul > li {
  /* 给父li添加相对定位，作为子菜单的定位基准 */
  position: relative;
}

.navbar .subNav {
  display: none;
}

.navbar > ul > li:hover .subNav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* 替换fixed为absolute */
  position: absolute;
  /* 根据父li的位置调整偏移，可根据实际布局修改 */
  left: 0;
  top: 100%;
  width: 600px;
  height: 300px;
  background-color: white;
  z-index: 1000;
  align-items: flex-start;
  padding: 20px;
  border-top: 2px solid #72bc92;
  box-shadow: 0 3px 4px rgba(199, 199, 199, 0.582);
}

修改后，子菜单会相对于父<li>定位，鼠标停留在父项或子菜单上时，父<li>的hover状态都会保持，子菜单不会消失。

方案二：React状态控制（适合复杂交互场景） #

如果需要更灵活的控制（比如添加延迟隐藏逻辑），可以用React的state管理子菜单的显示状态：

修改后的React组件代码 #

export class DropdownItem extends React.Component<IDropdownItemProps, { showSubNav: boolean }> {
  constructor(props: IDropdownItemProps) {
    super(props);
    this.state = { showSubNav: false };
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter() {
    this.setState({ showSubNav: true });
  }

  handleMouseLeave() {
    this.setState({ showSubNav: false });
  }

  public render(): React.ReactElement<IDropdownItemProps> {
    const item = this.props.item;
    const { showSubNav } = this.state;
    return (
      <ul>
        <li 
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
        >
          <a
            onClick={item.Url ? () => this.onLinkClicked(item.Url as string) : void 0}
            ref={this.linkRef}
            target="_blank"
            data-interception="off"
            rel="noopener noreferrer"
            className={styles.node}
          >
            {item.Title as string}
          </a>
          {(item.Children as INavigationNode[]).length ? (
            <div 
              className={styles.subNav}
              style={{ display: showSubNav ? 'flex' : 'none' }}
              onMouseEnter={this.handleMouseEnter}
              onMouseLeave={this.handleMouseLeave}
            >
              {(item.Children as INavigationNode[]).map((node) => (
                <div className={styles.level2Container}>
                  <a
                    className={styles.subNode}
                    target="_blank"
                    data-interception="off"
                    rel="noopener noreferrer"
                  >
                    {node.Title as string}
                  </a>
                  {(node.Children as INavigationNode[]).map((subNode) => (
                    <div className={styles.level3Container} style={{ fontSize: "12px" }}>
                      <a
                        target="_blank"
                        data-interception="off"
                        rel="noopener noreferrer"
                        className={styles.subNode}
                      >
                        {subNode.Title as string}
                      </a>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          ) : (
            <></>
          )}
        </li>
      </ul>
    );
  }
}

这种方式通过监听父<li>和子菜单的鼠标进入/离开事件，手动控制子菜单的显示状态，即使子菜单保留fixed定位也能正常工作。

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