Bootstrap子菜单突出显示直到下一次单击

Question

在鼠标悬停在下拉菜单中时，颜色会更改为显示当前项目。

单击子菜单将其打开，然后再次单击以关闭它，从悬停中突出显示仍然保持不变直到再次单击。

我需要菜单突出显示在单击关闭时消失，并在最初单击之前按照其中的方式操作，就像其他菜单选项一样。

Here's a quick VIDEO of the problem

LINK to index.html and style.css Pastebin

感谢您的帮助！

Answer 1

问题出在这里

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: red;
    background-image: none;
}

当你再次点击关闭子菜单时，css意识到这是focus，所以你可以这样解决：

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover:focus {
  background-color: red;
  background-image: none;
}
.dropdown-menu > li > a:focus {
  background-color: transparent;
  color: #CECECE;
}