Question

在我的导航链接中，当我将鼠标悬停在特定的[0-9]上时，背景颜色会发生变化。这就是我想要的。但是，当我将鼠标光标移到其子菜单列表（下拉菜单内容）时，父<li>的背景颜色将变为其他颜色。在尝试激活<li>之前，之后和之后，我尝试使它集中精力，但似乎没有任何效果。当我将鼠标悬停在特定的!important上以获取子菜单时，背景颜色会正常变化，但是当我移至子菜单时，其背景颜色会再次更改。另外，请注意，当我将光标移至下一个<li>项时，它仍然可以正常工作。仅当我的光标下降到下拉菜单时，才出现问题。我正在使用Bootstrap v3.3.6。

CSS

<li>

HTML

#category-navi .cats-menu {
  width: 100%;
  background: rgba(0,0,0,0.6);
  position: fixed;
  margin-top: 60px;
  z-index: 100;
  border-top: 1px solid rgba(0,0,0,0.5);
}
.parent-menu .navbar-collapse {
  padding-left: 0px;
}
.parent-menu .nav li > a:hover  {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}
.parent-menu .nav li > a:after  {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}
.mega-dropdown {
  position: static !important;
}
.dropdown-toggle a:hover {
  background-color: rgba(0,0,0,0.8) !important;
  color: #fff;
}
.mega-dropdown-menu {
  padding: 20px 0px;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: underline;
  background-color: none !important;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}
.dropdown-toggle {
  color: #fff;
}
.mega-dropdown ul {
  margin-top: -1px !important;
  margin-left: -1px !important;
  border-top: none !important;
}

Answer 1

更改：.parent-menu .nav li> a：hover

至：.parent-menu .nav li> .dropdown-toggle：hover

鼠标移至下拉菜单时，Bootstrap菜单<li>更改颜色

1 个答案: