如何正确显示drop-up菜单内容？hover触发菜单串位问题求助

问题原因 #

1. 按钮使用position: relative加left偏移，导致按钮超出自身.dropup容器范围，鼠标悬停时实际触发了相邻的下拉容器。
2. 下拉菜单的内联样式位置设置不合理，导致菜单偏移到其他菜单区域。
3. 箭头单独设置hover事件，未和菜单触发逻辑关联。

解决方案 #

调整布局结构与样式，确保每个触发按钮和对应下拉菜单绑定，避免元素重叠或偏移：

修改后的HTML代码

<div class="dropup">
  <div class="dropup-trigger">
    <button class="dropbtn">More Behance</button>
    <div class="arrow-down"></div>
  </div>
  <ul class="dropup-content more-behance-menu">
    <li><a href="#">Careers at Behance</a></li>
    <li><a href="#">Adobe Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Creative Career Tips</a></li>
    <li><a href="#">Download the App</a></li>
  </ul>
</div>

<div class="dropup">
  <div class="dropup-trigger">
    <button class="dropbtn">English</button>
    <div class="arrow-down"></div>
  </div>
  <ul class="dropup-content language-menu">
    <li><a href="#">English</a></li>
    <li><a href="#">Čeština</a></li>
    <li><a href="#">Dansk</a></li>
    <li><a href="#">Deutsch</a></li>
    <li><a href="#">Español</a></li>
    <li><a href="#">Français</a></li>
    <li><a href="#">Italiano</a></li>
    <li><a href="#">Nederlands</a></li>
    <li><a href="#">Norsk</a></li>
    <li><a href="#">Polski</a></li>
    <li><a href="#">Português</a></li>
    <li><a href="#">Pусский</a></li>
    <li><a href="#">Suomi</a></li>
    <li><a href="#">Svenska</a></li>
    <li><a href="#">Türkçe</a></li>
    <li><a href="#">日本語</a></li>
    <li><a href="#">한국어</a></li>
    <li><a href="#">中文(简体)</a></li>
    <li><a href="#">中文(繁體)</a></li>
  </ul>
</div>

修改后的CSS代码

.dropup {
  position: relative;
  display: inline-block;
  margin-right: 20px; /* 增加间距避免容器重叠 */
}

.dropup-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropbtn {
  padding: 5px;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  color: dimgray;
  background: transparent;
  cursor: pointer;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 3px solid transparent;
  border-right: 3px solid transparent; 
  border-top: 3px solid dimgray;
  margin-left: 5px;
  transition: transform 0.2s;
}

.dropup:hover .arrow-down {
  transform: rotateZ(-180deg);
}

.dropup-content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  border-radius: 10px;
  font-weight: bold;
  font-size: 11px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 单独设置不同菜单宽度 */
.more-behance-menu {
  width: 195px;
}

.language-menu {
  width: 100px;
}

.dropup-content a {
  color: #000;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
}

.dropup-content a:hover {
  background-color: #0057ff;
  color: white;
}

.dropup:hover .dropup-content {
  display: block;
}

修改说明 #

1. 用.dropup-trigger容器包裹按钮和箭头，通过flex实现水平排列，避免元素偏移出容器。
2. 移除按钮的相对定位与left偏移，确保按钮在自身容器范围内。
3. 统一箭头hover逻辑，通过父容器hover触发旋转，和菜单显示逻辑保持一致。
4. 下拉菜单使用bottom:100%+left:0定位，确保菜单出现在触发按钮正上方，移除混乱的内联样式。
5. 给两个下拉容器添加间距，彻底避免重叠问题。

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