Bootstrap导航处于活动状态

Question

我正在使用Bootstrap，我正在尝试在活动时更改菜单上的列表项目的背景颜色（在其上有下拉子菜单）。列表项正在改变颜色，但其中的锚点具有不同的颜色，而不是

         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                 <li><a href="">Home</a></li>
                 <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item1</a >
                    <ul class="dropdown-menu">
                      <li><a href="#">SubItem1</a></li>
                      <li><a href="#">SubItem2</a></li>
                      <li><a href="#">SubItem3</a></li>
                      <li><a href="#">SubItem4</a></li>
                    </ul>
                </li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
                <li><a href="">Item4</a></li>
            </ul>
        </div>

我的css：

  .navbar-nav > li {
   background-color:black;
   }   
  .navbar-nav > li a:active{
    background-color:white !important;
   }