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

Question

带有框阴影的菜单。我需要给它一个 30px 的 padding top 而不是 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

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