当我把鼠标放在下拉菜单时滑动滚轮，下拉菜单会随着滚轮一起移动，这是为什么，需要怎么解决呢？

Question

当我把鼠标放在下拉菜单时滑动滚轮，下拉菜单会随着滚轮一起移动，这是为什么，需要怎么解决呢？

这是我的css代码

这是html代码

Answer 1

引自免费微信小程序：皆我百晓生

要解决下拉菜单跟随鼠标滚动的问题，您可以在CSS中为下拉菜单添加一个overflow-y: auto;属性。这将创建一个垂直滚动条，这样当用户滚动鼠标滚轮时，只会滚动页面而不是下拉菜单。

首先，我们需要找到包含下拉菜单的HTML结构。从您提供的信息来看，下拉菜单是嵌套在<li>标签内的一个<ul>列表。因此，我们将在CSS中选择这个<ul>元素并应用overflow-y: auto;。

这里是修改后的CSS代码：

#drop-list-zbk {
    display: none;
    background-color: white;
    z-index: 9999;
    position: fixed;
    top: 120px;
    left: 0;
    width: 100%;
    height: 30%;
    overflow-y: auto; /* 添加此行 */
}

接下来，为了在鼠标悬停时显示下拉菜单，您已经正确地设置了:hover伪类，但有一个小错误：您应该将:hover应用于包含下拉菜单的<li>元素（即#clock-zkb），而不是应用到它的ID。以下是修复后的CSS：

#clock-zkb:hover #drop-list-zbk {
    display: block;
}

现在，当您将鼠标悬停在“装备库”上时，下拉菜单会出现，并且当您滚动鼠标滚轮时，页面会正常滚动，而不会带动下拉菜单。下拉菜单将保持其当前位置，同时显示一个垂直滚动条供用户浏览更多选项。