Javascript 绝对定位元素上的鼠标事件

我正在创建一个菜单，将有几层深。我的意图是使用几个嵌套的UL和LI元素来构建这个结构。当我将鼠标移到其中一个LI元素上时，它会显示该菜单项的下一级导航。但是，当我尝试将鼠标移动到该元素时，它会自动显示最终菜单项的子项

<div class="menu">
    <ul>
        <li><a>First</a>
            <ul>
                <li><a>Child of First</a></li>
                <li><a>Child of First</a></li>
            </ul>
        </li>
        <li><a>Second</a>
            <ul>
                <li><a>Child of Second</a></li>
                <li><a>Child of Second</a></li>
            </ul>
        </li>
    </ul>
</div>

<style>
    .headerMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 50%;
        background: black;
        color: white;
    }

    .headerMenu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
    }

    .headerMenu ul ul.visibleSub {
        width: 100%;
        opacity: 1;
    }
</style>

<script>
    $(document).ready(function () {
        var $ul = $('.headerMenu ul');

        $ul.find('li').on({ 
            mouseenter: function() {
                $(this).find('ul').first().addClass('visibleSub');
            },
            mouseleave: function() {
                $(this).find('ul').first().removeClass('visibleSub');
            }
        });
    });
</script>

事实上，您使用
不透明度来隐藏菜单的第二层。它们仍然在那里，当您移动到第二组时，您将鼠标悬停在第二组上，因此它是可见的。如果使用
display
来真正隐藏第二层，它将起作用。将CSS更改为：

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 50%;
  background: black;
  color: white;
}

.menu ul ul {
  display: none;      
  position: absolute;
  top: 0;
  width: 0;
  left: 50%;
}

.menu ul ul.visibleSub {
  width: 100%;
  display: block;
}   

没有其他需要更改的内容。
事实上，您使用
不透明度来隐藏菜单的第二层。它们仍然在那里，当您移动到第二组时，您将鼠标悬停在第二组上，因此它是可见的。如果使用
display
来真正隐藏第二层，它将起作用。将CSS更改为：

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 50%;
  background: black;
  color: white;
}

.menu ul ul {
  display: none;      
  position: absolute;
  top: 0;
  width: 0;
  left: 50%;
}

.menu ul ul.visibleSub {
  width: 100%;
  display: block;
}   

没有其他需要更改的内容。
只需添加z-index:-1，表示无法访问的ul：

   .menu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
        z-index: -1;
    }
    .menu ul li:hover > ul{
       opacity: 1;
       width: 100%;
       z-index: 1;
    }

正如我上面提到的，您可以避免jquery，而使用纯css来实现这一点。
您还可以为
.menu ul{transition:.2s}
添加一些转换，它将具有sime类型的简单动画
 只需为不可见的ul添加z-index:-1：

   .menu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
        z-index: -1;
    }
    .menu ul li:hover > ul{
       opacity: 1;
       width: 100%;
       z-index: 1;
    }

正如我上面提到的，您可以避免jquery，而使用纯css来实现这一点。
您还可以为
.menu ul{transition:.2s}
添加一些转换，它将具有sime类型的简单动画
 如果不需要动画，可以使用
display:hidden
而不是
opacity:0

因为在您的代码中，虽然第二级
li a
链接不可见，但它们具有填充/边距，并且实际上占据了第一级
ul
右侧的空间

如果不需要动画，可以使用
display:hidden
而不是
opacity:0

因为在您的代码中，虽然第二级
li a
链接不可见，但它们具有填充/边距，并且实际上占据了第一级
ul
右侧的空间

这是一个兄弟姐妹列表，而不是孩子列表。您应该能够使用CSS实现这种效果。这是一个列表同级，而不是子级。您应该能够使用CSS来实现这种效果。z索引修复了它。菜单实际上有CSS动画，我去掉了这些动画，以简化我共享的代码。JS对于其他一些东西来说是需要的，而不仅仅是鼠标在上面的东西。谢谢你的修复！z指数修正了它。菜单实际上有CSS动画，我去掉了这些动画，以简化我共享的代码。JS对于其他一些东西来说是需要的，而不仅仅是鼠标在上面的东西。谢谢你的修复！