导航栏下拉菜单登录页hover离开即消失，首页正常问题求助

我的Web应用顶部是独立的Navbar组件，下方为页面组件。首页中导航链接的下拉菜单hover交互正常，但在登录页，鼠标离开导航项后下拉菜单会立即消失。以下是动态加载导航内容的NavItems.jsx组件代码：

import React, {useState} from 'react';
import Dropdown from './Dropdown';
import {Link} from 'react-router-dom';

function NavItems(props) {
    const items = props.items;
    const [click, setClick] = useState(false);
    const handleClick = () => setClick(!click);
    const [dropdown, setDropdown] = useState(false);

    const onMouseEnter = () => {
        if (window.innerWidth < 960) {
            setDropdown(false);
        } else {
            setDropdown(true);
        }
    };

    const onMouseLeave = () => {
        if (window.innerWidth < 960) {
            setDropdown(false);
        } else {
            setDropdown(false);
        }
    };

    return (
        <div className='link-container' onMouseLeave={onMouseLeave}>
            <li className='nav-item'>
                {items.subNav ? (
                    <>
                        <Link
                            className={items.cName}
                            to={items.path}
                            onClick={() => setClick(false)}
                            onMouseEnter={onMouseEnter}
                        >
                            {items.title}
                        </Link>

                        {dropdown && <Dropdown submenus={items.subNav} />}
                    </>
                ) : (
                    <Link
                        className={items.cName}
                        to={items.path}
                        onClick={() => setClick(false)}
                    >
                        {items.title}
                    </Link>
                )}
            </li>
        </div>
    );
}

export default NavItems;

可能的原因分析 #

1. Hover容器范围未覆盖下拉菜单 #

当前link-container仅包裹了导航项<li>，下拉菜单<Dropdown>虽在结构上与<li>同级，但未被纳入link-container的hover检测范围。鼠标移动到下拉菜单时，会触发link-container的onMouseLeave事件，导致下拉菜单关闭。首页布局可能刚好让下拉菜单处于容器检测范围内，而登录页布局打破了这个范围。

2. 登录页z-index层级冲突 #

登录页的页面组件可能设置了较高的z-index，导致下拉菜单被覆盖在页面元素下方。此时鼠标移至下拉菜单区域时，实际触发的是页面组件的事件，而非下拉菜单，间接触发了导航项的mouseleave。

3. 登录页父容器溢出截断 #

登录页的某个父容器若设置了overflow: hidden，会截断下拉菜单，使其无法正常接收鼠标hover事件，视觉上表现为鼠标离开后立即消失。

解决方案 #

调整Hover容器范围 #

将下拉菜单纳入link-container包裹范围，并通过CSS确保容器覆盖下拉菜单区域：

修改NavItems.jsx的return部分：

return (
    <div className='link-container' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
        <li className='nav-item'>
            <Link
                className={items.cName}
                to={items.path}
                onClick={() => setClick(false)}
            >
                {items.title}
            </Link>
        </li>
        {/* 将下拉菜单移到link-container内 */}
        {items.subNav && dropdown && <Dropdown submenus={items.subNav} />}
    </div>
);

添加对应CSS样式：

.link-container {
    position: relative;
    /* 保留原有样式 */
}

/* 假设Dropdown组件的类名为dropdown */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* 保留原有样式 */
}

简化鼠标事件逻辑 #

原onMouseLeave的分支逻辑冗余，可简化为：

const onMouseLeave = () => {
    setDropdown(false);
};

修复登录页布局问题 #

• 给Navbar组件设置足够高的z-index，确保下拉菜单显示在页面组件上方：

.navbar {
    z-index: 1000;
}

• 检查登录页父容器的overflow属性，若存在hidden则移除或调整布局，避免截断下拉菜单。

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