在具有填充的元素上使用框阴影，而不是边距
在具有填充的元素上使用框阴影，而不是边距
提问于 2017-06-08 13:02:49
带有方框阴影的菜单。我需要给它一个30px的填充顶部，而不是边距顶部，这样当父菜单悬停时，子菜单就会出现，并在光标向下移动到空格时保持出现。如果我给它的页边距-顶部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);
}有谁知道如何克服这个问题吗？
谢谢
回答 2
Stack Overflow用户
发布于 2018-10-30 06:04:24
我意识到我在这个问题上来得太晚了，但我也有类似的问题，在寻找解决方案的过程中找到了这篇文章。我想我应该继续添加一个对将来可能对某些人有用的答案。而不是长方体阴影，使用filter:drop-shadow。这会忽略box模型，并且只影响dropdown元素本身。
像这样的东西应该对你有效：
.menu-item-has-children:hover .submenu {
display: block;
padding-top: 30px;
position: absolute;
filter: drop-shadow(0px 1px 15px rgba(0, 0, 0, .15));
}Stack Overflow用户
发布于 2017-06-08 13:10:57
首先，你真的不应该让它隐藏，当你想要它显示时，当它悬停的时候。其次，赋予子菜单一个绝对位置，使其脱离页面流，并使其不再“位于”父li中。
停止它的绝对化，你应该停止有问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44426998
复制相关文章
相似问题