如何用CSS实现内容列表显示/隐藏并解决hover失效问题

问题根源 #

你原来的CSS用了相邻兄弟选择器+.hide，只有鼠标直接hover按钮时才会触发列表显示。一旦鼠标移到列表上，按钮的hover状态消失，列表就跟着隐藏——因为列表和按钮是同级元素，没有共同的父容器来维持hover状态。

修复方案 #

把按钮和列表放在同一个父容器中，通过hover父容器来控制列表的显示/隐藏。这样鼠标在按钮或列表上时，父容器始终处于hover状态，列表就不会消失。同时修正原HTML中ul内直接嵌套button的不规范结构：

修改后的HTML

<div class="dropdown-container">
  <button class="myDiv">hover</button>
  <div class="hide">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </div>
</div>

修改后的CSS

.hide {
  display: none;
  margin-top: 4px; /* 可选：给按钮和列表留小间距，同时避免鼠标过渡时的间隙问题 */
}

.dropdown-container:hover .hide {
  display: block;
  color: red;
}

/* 可选：让父容器的hover范围精准覆盖按钮和列表 */
.dropdown-container {
  display: inline-block;
}

额外优化（解决间隙触发隐藏的问题） #

如果按钮和列表之间存在间隙，鼠标从按钮移到列表时可能会短暂触发隐藏。可以通过绝对定位让列表脱离文档流，彻底避免这个问题：

.dropdown-container {
  position: relative;
  display: inline-block;
}

.hide {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  padding: 8px;
  border: 1px solid #ddd;
}

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