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

Question

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

部分CSS：

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

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

如何解决问题。

Answer 1

在此处添加z-index：

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

Updated fiddle

Answer 2

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

更改这两种风格：

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

查看此更新的fiddle