删除其中一个菜单Wordpress上的悬停红线

Question

我们在这里有一个网站：http://americanbitcoinacademy.com/

当我将鼠标悬停在右侧的徽标上时，它有红线：

可以在文字上悬停红线，但我想在此徽标上消失。

基本上这就是我在悬停线和徽标上使用的内容：

#main-nav .navbar-nav>li>a:hover .menu-description{
color: #a6a6a6;
}

.navbar-inverse .navbar-nav>li>a:after, .navbar-inverse .navbar-nav>li>a:focus:after {
    background-color: #ea1e24;
    margin-top: 50px;
}
#main-nav .navbar-nav>li>a{
padding-top: 48px;
}


#nav-menu-item-3247{
margin-top: -57px;
}

我试图把：悬停在导航项上，但它没有用完。您可以使用检查器工具进行检查。

Answer 1

通过查看您的网站，当您像其他导航栏项一样将鼠标悬停在其上时，简单的解决方案就是删除使导航条项目出现红线的类

Answer 2

您是否可以使用可见性：隐藏并仅将其定位到徽标，以便其他导航栏项目保留红色条，但是那个不可见？应该能够使用导航项目ID号

执行此操作

Answer 3

使用.menu-item-type-post_type代替li：

.navbar-inverse .navbar-nav >.menu-item-type-post_type> a:after,
.navbar-inverse .navbar-nav>.menu-item-type-post_type>a:focus:after {
    background-color: #ea1e24;
    margin-top: 50px;
}

或者：

.navbar-inverse .navbar-nav>li.menu-item-type-custom> a:after,
.navbar-inverse .navbar-nav>li.menu-item-type-custom>a:focus:after {
    background-color: transparent;
    margin-top: 50px;
}

Answer 4

您的问题出在您的伪元素::after，

中

因此，请使用last-of-type

将此样式应用于最后一个li

.navbar-inverse .navbar-nav > li:last-of-type > a::after, .navbar-inverse .navbar-nav > li:last-of-type > a:focus::after {
  background: transparent;
}