在带有填充的元素上使用框阴影而不是边距

Question

带有框阴影的菜单。我需要给它一个30px的填充顶部而不是margin-top，这样当父级盘旋时，子菜单出现并在光标向下移动到其间的空间时出现。如果我给它margin-top 30px那么box-shadow工作正常，但是当光标向下移动远离父项时子菜单消失

这是一张它看起来像什么的图片

正如您所看到的，子菜单顶部有填充，但是框阴影会受到填充的影响。

有没有办法让盒子阴影转到第一个白名单项的上边缘，而不是将其向下推并在保持填充的同时创建透明区域？

以下是裸骨代码：

HTML：

<ul>
    <li>text</li>
    <li>text</li>
    <li class="menu-item-has-children">text
        <ul class="submenu">
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

CSS：

 li {
     position: relative;
 }

 .menu-item-has-children:hover .submenu {
     display: none;
 }

 .menu-item-has-children:hover .submenu {
      display: block;
      padding-top: 30px;
      position: absolute;
      box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.15);
 }

任何人都知道如何克服这个问题？

由于

Answer 1

我知道我对此事很晚，但是我遇到了类似的问题，并在寻找解决方案时找到了这篇文章。我以为我会继续添加一个可能对将来某人有用的答案。代替box-shadow，使用filter：drop-shadow。这将忽略框模型，仅影响下拉列表元素本身。

类似的事情应该对您有用：

 .menu-item-has-children:hover .submenu {
     display: block;
     padding-top: 30px;
     position: absolute;
     filter: drop-shadow(0px 1px 15px rgba(0, 0, 0, .15));
 }

Answer 2

首先，当你希望它显示时，你真的不应该告诉它隐藏。其次，给子菜单一个绝对的位置会使它从页面的流动中消失并导致它停止在内部＆＃34;内部＆＃34;父母李。

阻止它是绝对的，你应该停止有问题。