如何用纯CSS实现导航菜单选中按钮下方的下拉菜单？

你的问题核心是HTML结构和定位参考对象错了，现在的下拉菜单是和按钮同级的li，而且定位父级是整个导航ul，自然会错位。按下面的步骤改就能解决：

1. 修正HTML结构 #

把需要下拉的按钮和下拉菜单放到同一个<li>里，这样下拉菜单可以以这个li为定位基准：

<ul class="neu-navmenu">
  <li class="neu-button">Главная</li>
  <li class="neu-button">Проекты</li>
  <!-- 把按钮和下拉菜单放在同一个li中 -->
  <li class="dropdown-container">
    <button class="neu-button">DanganAwful</button>
    <!-- 下拉菜单内容 -->
    <ul class="dropdown">
      <li>下拉选项1</li>
      <li>下拉选项2</li>
      <li>下拉选项3</li>
    </ul>
  </li>
  <li class="neu-button">Неоморфизм</li>
  <li class="neu-button">Стилизация</li>
  <li class="neu-button">CSS</li>
</ul>

2. 调整CSS样式 #

• 给dropdown-container设置position: relative，作为下拉菜单的定位父级
• 下拉菜单设置position: absolute，通过top: 100%让它紧贴按钮底部，left: 0对齐按钮左侧
• 用父容器的:hover控制下拉菜单显示，同时保留你原来的拟态按钮样式

修改后的CSS：

.neu-button {
  border: none;
  background-color: #f0f0f3; /* 1 white */
  height:77px;
  width:280px;
  filter: drop-shadow(-2px -2px 7px rgba(255,255,255,0.75)) drop-shadow(4px 4px 15px rgba(0,0,0,0.125));
  border-radius: 16px;
  text-align: center;
  font-size: 1.5em;
  color: #C590EF; /* 400 violet */
  transition: 0.3s;
  margin-left: 10px;
  user-select: none;
  overflow: hidden;
}
.neu-button:hover {
  filter: drop-shadow(-1px -1px 5px rgba(255,255,255,1)) drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
}
.neu-navmenu {
  display: flex; /* 用flex替代inline-flex，更方便导航排列 */
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 10px; /* 用gap替代margin，更统一 */
}
/* 下拉容器，作为定位父级 */
.dropdown-container {
  position: relative;
}
/* 下拉菜单样式 */
.dropdown {
  position: absolute;
  top: 100%; /* 紧贴按钮底部 */
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 280px; /* 和按钮宽度一致 */
  background-color: #f0f0f3;
  border-radius: 0 0 16px 16px;
  filter: drop-shadow(4px 4px 15px rgba(0,0,0,0.125));
  display: none;
}
/* 下拉选项样式，可根据需求调整 */
.dropdown li {
  padding: 15px;
  text-align: center;
  color: #C590EF;
  cursor: pointer;
  transition: background 0.3s;
}
.dropdown li:hover {
  background-color: #e0e0e3;
}
/* 鼠标悬停父容器时显示下拉菜单 */
.dropdown-container:hover .dropdown {
  display: block;
}

关键修改点说明 #

• 把触发按钮和下拉菜单放在同一个父容器里，确保下拉菜单的定位基准是按钮所在的容器，而不是整个导航栏
• 用position: relative给父容器做定位锚点，下拉菜单的position: absolute会相对于这个锚点定位
• 用top: 100%让下拉菜单刚好出现在按钮正下方，避免错位

这样就能纯CSS实现下拉菜单，不需要JavaScript，而且菜单会精准显示在按钮正下方。

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