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

Question

当您将鼠标悬停在所有导航区域上时，我的网站上有一个很好的流程，您将看到红色文本和红色阴影，它在整个站点中都是流畅的。

我今天注意到在响应式视图、皮肤和模板页面上，鼠标悬停在边框下方，看起来很糟糕。我希望这遵循与桌面网站相同的效仿。

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

我没有与这些选项卡上的移动视图结婚，因此，如果更改它们的显示方式有意义，我也可以这样做。

我弄乱了阴影上的边距，但无济于事。

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

网页链接

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

宁愿尽量保持简单，因为也许我正在查看插入或 - 追加保证金，但如果所有其他方法都失败，伪类调用也可以工作？

谢谢

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 ） 向下响应时.css（第 21 行）在元素周围添加一个 6px 边框。

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