导航栏下拉菜单位置异常求助（CSS+React）

鼠标悬停导航栏中的“Weapons”链接时，下拉菜单可正常显示，但位置不在“Weapons”链接的正下方，需修正其定位。

悬停效果截图：

相关代码 #

Dropdown组件（React） #

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { MenuItems } from "./MenuItems";

const Dropdown = () => {
  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);
  return (
    <div>
      <ul
        onClick={handleClick}
        className={click ? "dropdown-menu clicked" : "dropdown-menu"}
      >
        {MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <Link
                className={item.cName}
                to={item.path}
                onClick={() => setClick(false)}
              >
                {item.title}
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Dropdown;

Navbar组件（React） #

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "./Button";
import Dropdown from "./Dropdown";
import EquipmentDropdown from "./EquipmentDropdown";
const Navbar = () => {
  const [click, setClick] = useState(false);
  const [dropdown, setDropdown] = useState(true);

  const handleClick = () => setClick(!click);

  const closeMobileMenu = () => setClick(false);

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

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

  return (
    <nav className="nav-bar">
      <Link to="/" className="site-name">
        Ready or Not Wiki
      </Link>

      <div className="menu-icon" onClick={handleClick}>
        <i className={click ? "fas fa-times" : "fas fa-bars"} />
      </div>
      <ul className={click ? "nav-menu active" : "nav-menu"}>
        <li className="nav-item">
          <Link to="/" className="nav-link" onClick={closeMobileMenu}>
            Home
          </Link>
        </li>
        <li className="nav-item">
          <Link to="/ammotypes" className="nav-link" onClick={closeMobileMenu}>
            Ammo
          </Link>
        </li>

        <li className="nav-item">
          <Link to="/armor" className="nav-link" onClick={closeMobileMenu}>
            Armor
          </Link>
        </li>
        <li className="nav-item">
          <Link
            to="/armormaterial"
            className="nav-link"
            onClick={closeMobileMenu}
          >
            Armor Material
          </Link>
        </li>
        <li className="nav-item">
          <Link
            to="/deployables"
            className="nav-link"
            onClick={closeMobileMenu}
          >
            Deployables
          </Link>
        </li>

        <li className="nav-item">
          <Link to="/headwear" className="nav-link" onClick={closeMobileMenu}>
            Headwear
          </Link>
        </li>
        <li className="nav-item">
          <Link to="/maps" className="nav-link" onClick={closeMobileMenu}>
            Maps
          </Link>
        </li>

        <li className="nav-item">
          <Link to="/missions" className="nav-link" onClick={closeMobileMenu}>
            Missions
          </Link>
        </li>
        <li className="nav-item">
          <Link to="/tacticals" className="nav-link" onClick={closeMobileMenu}>
            Tacticals
          </Link>
        </li>

        <li
          className="nav-item"
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}
        >
          <div className="nav-link" onClick={closeMobileMenu}>
            Weapons <i className="fas fa-caret-down" />
          </div>
          {dropdown && <Dropdown />}
        </li>
        <li className="nav-item">
          <Link to="/world" className="nav-link" onClick={closeMobileMenu}>
            World
          </Link>
        </li>
      </ul>
      <Button />
    </nav>
  );
};

export default Navbar;

CSS代码 #

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  list-style: none;
  text-align: start;
  /* right: 500px; */
}

.dropdown-menu li {
  background: #242222;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #950000;
}

.dropdown-menu.clicked {
  display: none;
}

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}
.nav-bar {
  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

.site-name {
  color: white;
  justify-self: start;
  cursor: pointer;
  text-decoration: none;
  font-size: 30px;
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: flex-end;
  margin-right: 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.nav-link:hover {
  background-color: #950000;
  border-radius: 4px;
  transition: all 0.2s ease-out;
}

.fa-bars {
  color: white;
}

.nav-link-mobile {
  display: none;
}

.menu-icon {
  display: none;
}
.btn {
  padding: 8px 20px;
  border-radius: 4px;
  outline: none;
  border: none;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  background-color: #950000;
}

.btn:hover {
  transition: all 0.3s ease-out;
  background-color: transparent;
  color: #fff;
  border-radius: 4px;
  border: 2px solid #950000;
}

解决方案 #

问题根源是绝对定位的参考元素错误：.dropdown-menu使用position: absolute，但父元素未设置相对定位，导致它以整个文档为基准定位。修改步骤如下：

1. 给包含下拉菜单的.nav-item添加相对定位，让下拉菜单以它为参考：

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
  position: relative; /* 添加相对定位 */
}

2. 调整.dropdown-menu的定位属性，使其紧贴父元素底部左侧：

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 100%; /* 改为100%，紧贴父元素底部 */
  left: 0; /* 对齐父元素左侧 */
  list-style: none;
  text-align: start;
  margin: 0; /* 移除默认margin避免偏移 */
  padding: 0; /* 移除默认padding */
}

修改后，下拉菜单会准确显示在“Weapons”链接的正下方。

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