浏览器窗口缩小时下拉菜单悬浮错位问题求助

问题描述 #

移动端视图下，打开下拉菜单后拖动浏览器窗口缩小尺寸，下拉菜单无法保持预设位置，会悬浮在Navbar上方；或拖动窗口至屏幕底部时，距离Navbar过远。

当前代码 #

DropDown.jsx #

// REACT:
import { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// DATA:
import { MenuItems } from './MenuItems' 

// CSS:
import './DropDown.css' 

export default function DropDown() {
  const [click, setClick] = useState(false)

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

  return (
    <>
      <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>
    </>
  )
}

DropDown.css #

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

.dropdown-menu li {
  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: rgb(173, 173, 173);
}

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

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}

解决思路与修改方案 #

问题根源在于下拉菜单使用了固定像素值的绝对定位（top:80px、right:260px），窗口尺寸变化时，这些固定值无法适配Navbar的位置变化。

步骤1：给Navbar添加相对定位 #

确保下拉菜单的父容器（Navbar）设置position: relative，这样下拉菜单的绝对定位会以Navbar为基准，而非整个文档：

.navbar {
  position: relative;
  /* 保留原有Navbar样式 */
}

步骤2：修改下拉菜单的定位属性 #

将固定像素值改为相对定位值，让下拉菜单始终紧贴Navbar：

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 100%; /* 紧贴Navbar底部 */
  right: 0; /* 对齐Navbar右侧 */
  list-style: none;
  text-align: start;
  /* 可选：添加margin-top: 0消除间隙 */
}

步骤3：移动端适配（可选） #

针对小屏幕设备，可通过媒体查询调整下拉菜单宽度，提升体验：

@media screen and (max-width: 768px) {
  .dropdown-menu {
    width: 100%; /* 下拉菜单占满屏幕宽度 */
  }
}

修改后，下拉菜单会始终跟随Navbar的位置变化，窗口缩放时不会再出现错位问题。

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