如何使阴影位于响应式边框上

Question

当您将鼠标悬停在所有导航区域上时，我的网站运行良好，您会看到红色文本和红色阴影，整个网站都是流畅的。

我今天注意到在响应式视图、SKINS 和 TEMPLATE 页面上，鼠标悬停在边框下方，看起来很糟糕。我希望它与桌面站点一样。

由于这些在移动设备上被分成 5 个单独的盒子，我认为这可能与它有关。

我不喜欢这些选项卡上的移动视图，所以如果需要更改它们的显示方式，我也可以这样做。

我弄乱了投影的边距，但没有用。

.gallery-menu-wrapper ul li {
    border: 6px solid #333;
    display: inline-block;
    float: none;
    margin: 6px 3px;
}

网页link

http://dagrafixdesigns.com/2019/industrial-darker/skins.html

我宁愿尽量保持简单，因为我可能正在查看插图或 - 追加保证金，但如果其他所有方法都失败了，伪 class 调用可能会起作用？

谢谢

Answer 1

如果您希望 DOM 中先前元素的阴影在鼠标悬停时出现在其后元素的顶部，请将 position: relative; z-index: 1; 添加到 .tp-navigations .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus

Answer 2

当您的导航 (.gallery-menu-wrapper ul li) 向下响应时，responsive.css（第 21 行）在元素周围添加一个 6px 的边框。

如果您将 border-bottom-width: 0px !important; 添加到您的悬停状态，它会反转此效果并且投影会按预期排列。

如何使阴影位于响应式边框上

How to make drop shadow lay on border on responsive

css

pseudo-class

media-queries

twitter-bootstrap