仅用CSS和HTML设置下拉菜单的定位

当然可以！仅用CSS就能实现让下拉菜单精准定位在第四个「INFO」按钮下方，核心思路是利用绝对定位的偏移计算和父容器的相对定位属性来调整位置。

问题分析 #

你的原始代码中，所有按钮和下拉内容都包裹在同一个position: relative的.dropdown容器里，默认情况下.dropdown-content会相对于容器左上角定位，所以会显示在第一个按钮下方。我们需要通过计算偏移量，把下拉菜单的位置调整到INFO按钮的正下方。

解决方案 #

下面是修改后的完整代码，我会标注关键改动：

CSS 代码

.dropbtn { 
  background-color: #000000; 
  color: white; 
  padding: 8px; 
  font-size: 9px; 
  width: 80px; 
  margin-right: 5px; 
  font-family: 'Istok Web', sans-serif; 
  border: none; 
  cursor: pointer; 
} 

.dropdown { 
  position: relative; 
  display: inline-block; 
  float: left; 
  top: 6.7%; 
  margin-left: 5px;
  white-space: nowrap; /* 新增：防止按钮换行，保证定位准确 */
} 

.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #95e5c4; 
  font-family: 'Istok Web', sans-serif; 
  text-align: center !important; 
  font-size: 9px; 
  width: 80px; 
  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2); 
  z-index: 1; /* 修复原代码z-index为空的问题，避免被其他元素遮挡 */
  top: 100%; /* 关键：让下拉菜单紧贴容器底部（即按钮下方） */
  left: calc(80px * 3 + 5px * 3); /* 关键：计算前三个按钮的总宽度+margin，定位到INFO按钮的左侧 */
} 

.dropdown-content a { 
  color: black; 
  padding: 8px 12px; 
  text-decoration: none; 
  display: block; 
} 

.dropdown-content a:hover {
  background-color: #e6e6e6;
} 

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

HTML 代码（无需修改，保持你原有的结构即可）

<div class="dropdown"> 
  <button class="dropbtn">HOSTEL</button> 
  <button class="dropbtn">RESERVATION</button> 
  <button class="dropbtn">GALLERY</button> 
  <button class="dropbtn">INFO</button> 
  <div class="dropdown-content"> 
    <a href="#">EVENTS IN ZG</a> 
  </div> 
  <button class="dropbtn">FIND US</button> 
</div>

关键改动说明 #

1. top: 100%：让下拉菜单的顶部对齐父容器.dropdown的底部，确保它始终在按钮的正下方，不会和按钮重叠。
2. left: calc(80px * 3 + 5px * 3)：通过CSS的calc()函数计算偏移量——你的每个按钮宽度是80px，右侧margin是5px，前三个按钮的总占用宽度就是80*3 +5*3=255px，这样下拉菜单的左侧就会和INFO按钮的左侧完全对齐。
3. white-space: nowrap：添加到.dropdown容器，防止窗口变窄时按钮自动换行，保证定位的偏移量始终准确。
4. 修复z-index：给.dropdown-content设置z-index:1，避免下拉菜单被页面其他元素遮挡。

这样修改后，当你 hover 整个.dropdown容器时，下拉菜单就会精准显示在INFO按钮的正下方，完全用CSS实现，不需要任何JavaScript。

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