Html 未在子菜单中的子菜单上拾取CSS悬停事件

在我工作的网站上，我在一个子菜单中有一个子菜单。二级子菜单高于父一级子菜单。我使用css的基本意思是，如果我将鼠标悬停在level-1子菜单的父列表项上，或者在level-1子菜单本身上，level-1子菜单是可见的，我在level-2子菜单上重复同样的操作。但是当鼠标离开一级子菜单的边界时，二级项上的指针事件似乎不再被拾取

我理解这确实令人困惑，但你可以在这个草率而快速的搭建站点上看到它的实际作用（我知道它不是处于最佳状态，请耐心等待样式的出现）：

将鼠标悬停在所有类别、美洲原住民文物上，并尝试在列表下方选择一个子菜单项。当您离开level-1子菜单的边界时，整个菜单将消失，好像没有收到悬停事件一样

• 在safari中，2级的悬停事件似乎都没有注册
• 在chrome中，当鼠标离开级别1的边界时，级别2的悬停事件消失
• 在firefox中，一切正常，只要我在上面停留，子菜单就会保持打开状态

应该注意的是，我没有使用display:none在子菜单项出现之前隐藏它们，我使用的是不透明度、可见性和指针事件的组合：none，以便使用平滑淡入过渡。我提到这一点是因为我想知道我的指针事件是否会把事情搞砸。。。？我不知道怎么办

我的css的简化示例：

.sub-menu-level-1 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

li:hover > .sub-menu-level-1,
li > .sub-menu-level-1:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

我是在做傻事，还是这是某种浏览器问题

如果可能的话，我想避免使用Javascript，我只是觉得像这样的东西不需要它

我到处检查指针事件：无、溢出属性、z索引问题等

这里是实际CSS/HTML的复制和粘贴

.menu-wrapper {
  background-color: @color-orange;
  color: @color-white;
  position: relative;

  .all-categories {
    position: absolute;
    top: 100%;
    order: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 30px, 0);
    transition: 0.1s ease-in-out;
    transition-property: transform, opacity, visibility;
    z-index: 9;
    background-color: @color-white;
    padding: 25px 45px;
    box-shadow: 2px 3px 19px rgba(0, 0, 0, 0.1);
    color: @color-black;

    .toggle-nav > ul {
      columns: 4;
      height: 100%;
      padding: 0;
      list-style: none;
      margin: 0;
      max-height: 450px;

      li {
        padding-right: 20px;
        break-inside: avoid;

        a {
          line-height: 1.2;
          display: block;
          padding: 20px 0;
        }

        .sub-menu {
          left: calc(~'100% - 20px');
          top: 0;
          border: 1px solid #DDDDDD;
          padding: 20px 30px;
          color: #666666;

          li {
            width: 100%;
            padding-right: 0;

            a {
              padding: 10px 0;
            }
          }
        }

        &.menu-item-has-children {
          &::after {
            display: none;
          }

          > a::after {
            content: "";
            display: inline-block;
            margin-left: 10px;
            width: 0;
            height: 0;
            border-left: 6px solid #B2B2B2;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
          }
        }
      }
    }
  }

  .see-all-categories {
    order: 1;
    color: @color-white;
    font-size: 18px;
    font-family: @font-main;
    font-weight: bold;
    position: relative;
    padding: 30px 10px 30px 0;

    &::after {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-bottom: 2px solid @color-white;
      border-right: 2px solid @color-white;
      transform: translateY(-50%) rotate(45deg);
      position: absolute;
      right: 0;
      top: 50%;
    }

    &:hover + .all-categories,
    + .all-categories:hover {
      opacity: 1;
      visibility: visible;
      pointer-events: initial;
      transform: translate3d(0, 0, 0);
    }
  }
}

---

我希望当我将鼠标悬停在.item上时，.item:hover样式应该处于活动状态。。。。。对吧？

我认为您可能过度复杂了您的样式，特别是

指针事件

样式等等。如果菜单和子菜单中的所有元素都是链接/可悬停项，则不应删除

指针事件

或其个别可见性，而应使父容器不可见

此外，由于您正在使用SCS设置样式，因此您将

.sub菜单

嵌套在一个路径中，该路径使

.sub菜单

成为一个非常特定的CSS规则。您的CSS如下所示：

.menu-wrapper .all-categories .toggle-nav > ul li a .submenu {
    left: calc(~'100% - 20px');
    top: 0;
    border: 1px solid #DDDDDD;
    padding: 20px 30px;
    color: #666666;
}

作为一个标准，为了简单起见，您应该避免嵌套到5个级别

在

.menu-wrapper .all-categories .toggle-nav > ul li a .submenu {
    left: calc(~'100% - 20px');
    top: 0;
    border: 1px solid #DDDDDD;
    padding: 20px 30px;
    color: #666666;
}