Bootstrap導航欄下拉元素

Question

我已經生成了一個引導3導航欄，它除了一個我不能完全弄清楚的用例外，完全可以工作。

當我打開一個下拉菜單時，nav bar元素變爲黑色，即使我沒有定義這種行爲。

當我檢查的元素，我可以看到下面的CSS似乎跟着（我改變了顏色的證明，這是有問題的項目），但我認爲這是在寫在我的CSS樣式：

.navbar-nav>.open>a { 
background-image: -webkit-linear-gradient(top,#080808 0,#0f0f0f 100%); 
background-image: -o-linear-gradient(top,#080808 0,#0f0f0f 100%); 
background-image: -webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f)); 
background-image: linear-gradient(to bottom,#FFFFFF 0,#FFFFFF 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0); 
background-repeat: repeat-x; 
-webkit-box-shadow: inset 0 3px 9px rgba(0,0,0,.25); 
box-shadow: inset 0 3px 9px rgba(0,0,0,.25); 
} 

如何刪除此樣式，以便導航欄元素的背景顏色保持我想要的顏色？

我的HTML：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container">   
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">My brand here</a> 
     </div>   
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="#">Item One</a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Item Two <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Drop down item </a></li> 
         <li><a href="#">Drop down item </a></li> 
         <li><a href="#">Drop down item </a></li> 
         <li><a href="#">Drop down item </a></li>              
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Item three <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Drop down item </a></li> 
         <li><a href="#">Drop down item </a></li> 
         <li><a href="#">Drop down item </a></li>              
        </ul> 
       </li> 
       <li> 
        <a href="#">Item four </a> 
       </li> 
       <li> 
        <a href="#">Item five</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

我的CSS樣式導航欄

.navbar-inverse { background-color: #F61E99} 
    .navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar- nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #FFFFFF} 
    .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #F61E99} 
.dropdown-menu { background-color: #FFFFFF} 
.dropdown-menu .open {background-color: #F61E99} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #F61E99} 
.navbar-inverse { background-image: none; } 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; } 
.navbar-inverse { border-color: #F61E99} 
.navbar-inverse .navbar-brand { color: #FFFFFF} 
.navbar-inverse .navbar-brand:hover { color: #FFFFFF} 
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF} 
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #F61E99} 
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF} 
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF} 
.dropdown-menu>li>a { color: #333333} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF} 

我的行爲的截圖，當我打開導航欄下拉：

Answer 1

覆蓋的background-image物業爲nav-bar。更新你的CSS代碼，如下所示。

.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {background-image:none !important; background-color: #F61E99 !important;}