css - 将鼠标悬停在 Twitter Bootstrap 的下拉菜单上时，链接的背景颜色不会改变

Question

我正在为 css 使用 twitter bootstrap。我正在使用 .dropdown-toggle 类在悬停链接时显示下拉框。

当我将鼠标悬停在下拉框菜单项上时，我希望主菜单链接的背景颜色为白色。 我正在使用的 CSS 不起作用。

<nav class="navbar navbar-fixed-top">

  <div class="navbar-inner">

    <div class="container">

      <div class="nav-collapse collapse">
       <span class="page-title" data-bind="text: router.activeItem().title"></span>
        <ul class="nav" data-bind="foreach: router.visibleRoutes">
          <li data-bind="css: { active: isActive}" class="navLi">
              <a data-bind="text: name" href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
                <ul class="dropdown-menu qaDropdown" data-bind="foreach: qaSubMenus">
                    <li class="navLi"> 
                        <a data-bind="attr: { href: '#/' + url }, text: name" href="#"></a>
                    </li>
                </ul>

           </li>
          </ul>

      </div>

    </div>
  </div>

</nav>


.dropdown-menu > li > a:hover .dropdown-toggle{
     background-color:white;
}

Answer 1

添加下面的 css 解决了问题:

.navLi:hover .dropdown-toggle{
      color:black;
}

.navLi:hover {
   background-color:white;
}