为什么将鼠标悬停在第二个子列表项上会失去焦点

Question

小提琴：https://jsfiddle.net/n3tzbn4o/3/

部分 CSS：

/* Menu */
.menu {
  position: relative;
  z-index: 100;
    height: 40px;
    width: 100%;
}

当将鼠标悬停在"2015> Assesments not submitted"Menu 3>上时，它会转到下一个菜单，但不会在此处发生：https://jsfiddle.net/n3tzbn4o/4/当第二个子菜单没有另一个子菜单时。

如何解决此问题。

Answer 1

您正在使用opacity来显示和隐藏菜单，我建议使用display来显示和隐藏它。当您使用opacity:0;元素仍然呈现出来（它只是不可见），这意味着它正在响应悬停事件。 display:none;不会呈现，也不会占用 DOM 中的空间。

更改以下 2 种样式：

.menu2 ul {
    position: absolute;
    top: 5px;
    left: 185px;
    /*opacity:0;*/
    display:none;
    ...
}
.menu2 li:hover > ul { /*opacity:1;*/ display:block; }

查看此更新的小提琴

Answer 2

在此处添加 z 索引：

.menu2 li:hover > ul { 
  opacity: 1; 
  z-index:99999; // <- added
}

更新的小提琴