Question

当我将鼠标放在所有导航区域上时，我的网站上有一个很好的流程，你会看到一个红色文字和红色阴影，它在整个网站都是流动的。

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

由于这些在移动设备上分成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）响应时，responsive.css（第21行）会在元素周围添加一个6px的边框。

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

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

2 个答案: