javascript - 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 意识到这是焦点，所以你可以这样修复:

.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;
}