悬停菜单边框底部消失答案

【问题标题】：hover menu border bottom disappears悬停菜单边框底部消失
【发布时间】：2021-03-06 02:00:27
【问题描述】：

只要我登录到 wordpress 悬停菜单边框底部就会出现，但是当我注销并检查菜单悬停边框底部的那一刻就会消失。下面是我的css代码现在任何解决方案

.customize-support .navbar-v1 .navbar-nav > li > a:hover {
     opacity: 1;
}
.customize-support .navbar-v1 .navbar-nav > li > a::after{
    transition: 300ms;
    height: 3px;
    content: "";
    position: absolute;
   background-color: #0099cc;
    width: 0%;
    bottom: 10px;
    display:flex;   
}
.customize-support .navbar-v1 .navbar-nav > li > a:hover::after{
width:65%;
display:block;
}

您还可以在下面查看附件图片

【问题讨论】：

您是否在使用某种缓存插件，例如 wprocket 或蜂鸟？如果是这样，请尝试删除缓存，因为如果登录到网站，它们都会加载未兑现的版本
我正在使用 LiteSpeed Cache 插件，是否影响使用？
可能是的，我个人只使用过 wprocket 或蜂鸟而不是 LiteSpeed，所以我不能确定 100%，但因为它们的行为方式相同（登录时加载未兑现的页面) LithSpeed 也可以这样做。如果您对 css 或主题设置等进行了更改，则可能需要删除缓存。我用 LiteSpeed 的documentation 找到了这个页面

标签： html css wordpress

【解决方案1】：

我怀疑它的原因是类名 .customize-support 仅在您登录时才应用...一个可能的解决方法是在您的 css 中删除它，如下所示，使 css 在两种情况下都可以工作（登录和登录-出）：

.navbar-v1 .navbar-nav > li > a:hover {
    opacity: 1;
}
.navbar-v1 .navbar-nav > li > a::after{
    transition: 300ms;
    height: 3px;
    content: "";
    position: absolute;
    background-color: #0099cc;
    width: 0%;
    bottom: 10px;
    display:flex;   
}
.navbar-v1 .navbar-nav > li > a:hover::after{
    width:65%;
    display:block;
}

更新 2

在父菜单项处于活动状态时保持下划线：

更新这个：

.navbar-v1 .navbar-nav > li > a:hover::after, {
    width: 65%;
    display: block;
}

到这里：

.navbar-v1 .navbar-nav > li > a:hover::after,
.navbar-v1 .navbar-nav > li.current-menu-parent > a::after {
    width: 65%;
    display: block;
}

【讨论】：

非常感谢 @mikerojas 帮助删除 .customize-support 类名
使用 LiteSpeed 插件有什么问题吗？？ @mikerojas
还有一个问题 4，您在单击特定菜单链接后，应该保持活动（焦点）并带有底部边框，但现在底部边框不显示该怎么做？？
更新了我的答案，包括在活动时修复下划线...我没有使用 LiteSpeed，所以不能说好或坏。
您能否通过以下链接查看此问题stackoverflow.com/questions/66458654/…