如何设置仅在悬停父按钮时显示下拉菜单，而非悬停下拉内容时

将触发下拉菜单显示的hover目标从父容器.dropdown换成按钮.dropbtn，同时修正visibility的无效值（原代码里的visibility: none不合法，需改为visibility: hidden）。

修改后的完整CSS代码：

.dropdown-content {
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease-in-out;
}

/* 仅在鼠标悬停按钮时显示下拉内容 */
.dropbtn:hover + .dropdown-content {
  opacity: 1; 
  visibility: visible;
}

为什么这样改？ #

• 原代码用.dropdown:hover时，整个父容器（包括下拉内容区域）被判定为悬停状态，所以鼠标移到内容上菜单不会消失。
• 换成.dropbtn:hover + .dropdown-content后，只有当鼠标停在按钮上时，才会通过相邻兄弟选择器触发下拉内容显示。由于下拉内容是绝对定位，不在按钮的布局范围内，鼠标一离开按钮，hover状态就消失，下拉菜单立刻隐藏，完全满足你的需求。

如果想优化鼠标从按钮移向内容时的过渡体验（避免瞬间闪烁），可以额外给父容器添加以下样式（可选）：

.dropdown {
  position: relative;
  pointer-events: none;
}
.dropbtn, .dropdown-content {
  pointer-events: auto;
}

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