下拉菜单（Dropdown Menu）修复请求：菜单栏滚动异常问题

我来帮你搞定这个菜单的问题，核心是下拉菜单的定位逻辑和默认显示状态没设置对，导致了菜单栏滚动和子菜单显示异常。下面是修复后的完整代码，我会把关键改动给你讲清楚：

完整代码 #

HTML（保持你原有的结构即可） #

<html>
<body>
  <div class="menu-bar">
    <div class="navigate">
      <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-content-center">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
          <ul class="dd-menu">
            <li><a href="#">link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </li>
        <li><a href="#">CC</a>
          <ul class="dd-menu">
            <li><a href="">Link 5</a></li>
            <li><a href="">Link 6</a></li>
            <li><a href="">Link 7</a></li>
          </ul>
        </li>
        <li><a href="#">Team</a>
          <ul class="dd-menu">
            <li><a href="#">Link 8</a></li>
            <li><a href="">Link 9</a></li>
            <li><a href="">Link 10</a></li>
          </ul>
        </li>
        <li><a href="#"> Contact</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

修改后的CSS #

.menu-bar{
  background-color:#0000FF;
  width:100%;
}
.navigate{
  display:flex;
  flex-wrap:wrap;
  justify-content:end;
  align-items:center;
}
.navigate ul{
  position: relative;
  z-index:1;
  max-width:100%;
  height: auto;
  padding: 10px 15px;
  margin: 0;
  list-style: none;
  /* 移除了原有的transition，避免导航栏滚动 */
}
.navigate ul li {
  margin: 0 26px;
  /* 添加relative定位，让子菜单以当前li为基准定位 */
  position: relative;
}
.navigate ul li a {
  display: block;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transition: all .5s;
}
.navigate ul li a:hover {
  background-color:#CC0000;
}
/* 默认隐藏下拉菜单 */
.navigate ul .dd-menu{
  display: none;
  position: absolute;
  top: 100%; /* 紧贴父菜单项底部 */
  left: 0;
  width: 150px;
  padding: 0;
  margin: 0;
  background-color:#2c97e4;
  list-style: none;
}
/* 鼠标悬停父菜单项时显示对应的下拉菜单 */
.navigate ul li:hover .dd-menu{
  display:block;
}
.navigate ul .dd-menu li{
  margin: 0;
  padding: 10px;
  border-bottom:1px dotted #FFFFFF;
  text-align:left;
}
.navigate ul .dd-menu li a:hover {
  background-color:#CC0000;
}

关键改动说明 #

• 给父菜单项添加position: relative：这样下拉菜单的绝对定位会以当前父菜单项为参照物，不会乱跑，也不会影响整个导航栏的布局。
• 默认隐藏下拉菜单：给.dd-menu设置display: none，只有鼠标悬停对应父菜单项时才显示。
• 修正下拉菜单的定位：用position: absolute + top: 100%让下拉菜单紧贴父菜单项底部，避免和导航栏重叠或导致滚动。
• 移除导航栏的过渡效果：删掉了.navigate ul上的transition: all 0.5s，这是导致整个菜单栏滚动的原因之一。
• 简化子菜单项样式：去掉了原代码中错误的position: absolute设置，让子菜单项正常垂直排列，不会重叠。

这样修改后，鼠标悬停About/CC/Team时，只会显示对应的下拉子菜单，整个菜单栏不会出现滚动或位移，完全符合你的需求~

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