html - 主动焦点悬停 : keep parent focus hover when go to sub menu

Question

我正在使用 bootstrap 制作导航菜单，我想保持父焦点悬停，同时将焦点移到子菜单这是我的代码

.nav-horizontal > li {
    font-size: 16px;
    padding: 2px;
    float: left;
    border-right: 1px solid #535152;
}
.nav-horizontal > li:last-child {
    border-right: none;
}
.nav-horizontal > li > a {
    border-radius: 0;
    text-transform: uppercase;  
    color: #231f20;
    font-weight: bolder;
}
.nav-horizontal > li + li {
    margin-left: 2px;
}
.nav-horizontal > li.active > a,
.nav-horizontal > li.active > a:focus {
    color: #fff;
    background-color: #ffffff;
}
.nav-horizontal > li:hover > a > a {
    background: #373435;
    color: #ffffff !important;
}

我已经改变了，但它仍然无法集中父悬停。如何修复？

Answer 1

试试下面的结构

 .nav-horizontal ul li:hover > a {
    background: #373435;
    color: #ffffff !important;
}