Dropdown悬浮异常：鼠标移至内容区域时消失，同代码组件表现不一

数据老陈

2026-7-25

Dropdown悬浮消失问题修复方案

你的问题核心在于：当前CSS仅在鼠标悬停在.about触发元素上时，通过相邻兄弟选择器+让.about-dropdown显示。一旦鼠标移到dropdown内容区域，.about的hover状态消失，dropdown就会跟着隐藏。第二个组件失效，大概率是结构复制时的层级或选择器冲突导致。

修复步骤：

调整HTML结构：将触发元素和dropdown包裹在同一个父容器中，通过父容器的hover状态统一控制显示逻辑

<div class="about-container">
  <div class="about">
    <p class="about-text">About-Page</p>
  </div>
  <div class="about-dropdown">
    <a class="about-me-text" href="About/About-Me">About-Me</a>
    <a class="about-credits-text" href="About/Credits">Credits</a>
    <a class="about-contact-me-text" href="About/Contact-Me">Contact-Me</a>
  </div>
</div>

修改CSS规则：针对父容器的hover状态控制dropdown显示，同时优化定位逻辑

.about-container {
  position: absolute;
  right: 101px;
  top: 0;
}

.about {
  padding-top: 32px;
  height: 68px;
}

.about:hover {
  background-color: #e2e0d7;
  transition: 1s;
}

.about-text:hover {
  opacity: 50%;
  transition: .5s
}

.about-dropdown {
  z-index: 1;
  position: absolute;
  top: 100%; /* 相对于父容器底部定位，避免固定高度导致的错位 */
  background-color: #494642;
  padding: 36px 10px;
  right: 0;
  display: none;
}

/* 父容器hover时显示dropdown，鼠标在dropdown区域时父容器仍保持hover状态 */
.about-container:hover .about-dropdown {
  display: block;
}