Question

我正在创建一个深层次的菜单。我的目的是使用几个嵌套的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>

您可以在https://codepen.io/pcasagrande/pen/RZqQwO

查看和演示非常简单的代码

Answer 1

事实上，您使用opacity来隐藏第二层菜单。它们仍然存在，当你移动到第二组时，你将它悬停在第二组上，因此它可见。如果您使用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;
}

没有其他事情需要改变。

Answer 2

只需为不可见的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 ul{ transition: .2s}添加一些过渡，它将具有sime类型的简单动画。

Answer 3

如果您不需要动画，可以使用display: hidden代替opacity: 0

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

https://codepen.io/anon/pen/prQapW

绝对定位元素上的Mouseenter事件

3 个答案: