绝对定位元素上的Mouseenter事件

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

只需添加的z-index：-1 unvisible 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 ul{ transition: .2s}添加一些转换，它会有一些简单的动画。

Answer 2

的非常精简的代码，它是您使用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 3

如果你不需要动画，你可以因为在代码中使用的display: hidden代替opacity: 0

，虽然第二级li a链接是不可见的，他们有填充/保证金，右边实际占用空间第一级ul的一面。

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