Question

我的子菜单有问题position:absolute;和top:5em;。子项将被隐藏，直到您将鼠标悬停在父项（li元素）上。一切正常，但当你将鼠标悬停在父元素（li元素）上时，会显示子菜单（li＆gt; ul元素），但你不能鼠标悬停（访问）它，因为当鼠标离开父元素（li元素）时它会消失。

我发现top: 5em;正在LI和UL之间进行＆＃34; break＆＃34; 。当我尝试将top: 5em;减少到例如top: 1em;（UL在父元素（li元素）边界上的大小或者例如在父元素（li元素）中有一点时，那么菜单是工作!!

但是我需要它才能拥有我自己选择的顶级并且仍在工作。

如何使用position:absolute和top属性实现此目标？

现场演示：http://codepen.io/riogrande/pen/bEGzXm

Answer 1

我觉得很奇怪你找到了问题的确切根本原因，但尚未弄清楚修复。

无论如何，修复方法是向<li>添加透明子项，以便填补<li>和<ul>子项之间的空白。在这种情况下，我使用li:before：

&:before{
    content: '';
    display: none;
    width: 100%;
    height: 5em;
    position: absolute;
    left: 0;
    top: 0;
  }
  &:hover:before{
    display:block;
  }

演示：http://codepen.io/anon/pen/mVdgdo

已编辑：已编辑回答以解决OP自己的见解问题。

Answer 2

基于Av Avt答案的解决方案

无论如何，修复方法是向<li>添加透明子项，以便填补<li>和<ul>子项之间的空白。在这种情况下，我使用li:before：

&:before {
        content: '';
        display: none;
        width: 100%;
        height: 5em;
        position: absolute;
        top: 100%;
        left:0;
}

然后当您将鼠标悬停在父<li>上时，将其显示为阻止，这样只有当父<li>悬停（有效）时才会填补空白

&:hover {
        &:before {
          display:block;
        }
        > ul {
          display: block;
        }
      }

无论如何，感谢@ av-avt !!没有你，我想不出来！

绝对定位的子菜单顶级属性不起作用

2 个答案: