CSS下拉菜单求助：hover下拉列表时chevron无法维持旋转状态

问题根源 #

• Chevron图标是.btn的子元素，当鼠标从按钮移到下拉菜单时，.btn的:hover状态会消失，导致图标恢复原状。
• 你写的.drop-down:hover .chevron选择器无效，因为Chevron不在.drop-down的DOM层级内，无法被该选择器选中。

解决方案 #

给按钮和下拉菜单的共同父容器添加一个类（比如menu-container），将hover事件绑定到这个父容器上。只要鼠标在父容器范围内（包括按钮和下拉菜单），父容器的:hover状态就会保持，从而让Chevron一直处于旋转状态。

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hover menu</title>
    <link rel="stylesheet" href="CSS/style.css" />
  </head>
  <body>
    <div class="wrapper">
      <!-- 添加menu-container类作为父容器 -->
      <div class="menu-container">
        <button class="btn">
          User Profile <img class="chevron" src="image/chevron.svg" alt="" />
        </button>
        <div class="drop-down">
          <ul>
            <li>Basket</li>
            <li>Edit</li>
            <li>Courses</li>
            <li>Logout</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

修改后的CSS代码 #

@font-face {
  font-family: "Poppins";
  src: local("Poppins"), url(../font/Poppins-Regular.ttf) format(truetype);
}
html {
  box-sizing: border-box;
}
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
body {
  font-family: "Poppins";
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* 父容器设置相对定位，让下拉菜单的绝对定位基于它 */
.menu-container {
  position: relative;
}
.btn {
  color: #fff;
  background-color: #1565c0;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
  transition: all 400ms;
}
.chevron {
  width: 20px;
  vertical-align: middle;
  transition: all 300ms linear;
}
.drop-down {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px; /* 增加间距避免按钮和菜单之间的空隙导致hover中断 */
  text-align: center;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 0px gray;
  visibility: hidden;
  opacity: 0;
  transition: all 400ms ease-out;
}
.drop-down ul li {
  width: 150px;
  border-radius: 2px;
  padding: 5px;
  transition: all 200ms linear 100ms;
  cursor: pointer;
}
/* Actions */
/* 父容器hover时，按钮变色 */
.menu-container:hover .btn {
  background-color: #0d47a1;
}
/* 父容器hover时，chevron旋转 */
.menu-container:hover .chevron {
  transform: rotate(180deg);
}
/* 父容器hover时，下拉菜单显示 */
.menu-container:hover .drop-down {
  transform: translate(0px, 10px);
  visibility: visible;
  opacity: 1;
}
.drop-down ul li:hover {
  color: #fff;
  background-color: #1565c0;
}

关键修改点 #

1. 给父容器添加menu-container类并设置position: relative，确保下拉菜单的绝对定位基于该容器。
2. 将所有hover触发的样式（按钮变色、chevron旋转、下拉菜单显示）改为监听父容器的:hover状态，统一控制交互逻辑。
3. 给下拉菜单添加top: 100%和margin-top: 5px，避免按钮和菜单之间的空隙导致鼠标移动时hover状态中断。

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