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

Question

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

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

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

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

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

.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

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

谢谢

Answer 1

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