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

带有框阴影的菜单。我需要给它一个30px的填充顶部而不是margin-top，以便当父对象悬停时，子菜单出现，并且当光标向下移动到它们之间时保持显示。如果我给它提供margin-top 30px，则框阴影效果很好，但是当将光标从父项上移开时，子菜单会消失

这是一张看起来像的照片



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

有什么方法可以让框阴影移到第一个白名单项目的顶部边缘，而不是在保持填充的同时将其向下推并创建该透明区域？

这是简单的代码：

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);
 }

任何人都有一个想法如何克服这个问题？

谢谢

最佳答案

我意识到我在这方面迟到很晚，但我遇到了类似的问题，并在寻找解决方案时找到了这篇文章。我以为我会继续添加一个可能对将来某人有用的答案。代替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));
 }