アクティブなナビゲーションバーのタブの背景色を変更します

Question

私はHTML/CSSの初心者です。私はHTMLとCSSスクリプトに問題があります。私がdropdown-menu（私のスクリプトの後に画像justeを見ることができます）が表示されたらactive navbar tabからbackground colorに変更しようとしていますが、現時点では何の効果もありません。おそらく私はCSS部分（私のCSSファイルの最後の行）をうまく書いていないからでしょう。

これは私のHTMLコードです：

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="http://www.data.fr/">DataEC</a> 
      </div> 

      <!-- Home tab --> 

      <ul class="nav navbar-nav"> 
       <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Accueil</a></li> 

      <!-- Individual form tab --> 

       <li class = "dropdown"> 
        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown"> 
         <span class="glyphicon glyphicon-baby-formula"></span> Fiches individuelles 
        <b class = "caret"></b> 
        </a> 
        <ul class = "dropdown-menu"> 
         <li><a href = "{% url "home" %}">Accueil des fiches individuelles</a></li> 
         <li><a href = "{% url "form" %}">Création des fiches individuelles</a></li> 
         <li><a href = "{% url "searched" %}">Consultation des fiches individuelles</a></li> 
         <li><a href = "{% url "deleted" %}">Edition des fiches individuelles</a></li> 
        </ul> 
       </li> 

そして私は、このタブから黒の背景色を変更したい：

これは私のCSSファイルです：

/* Define background color from upper navbar */ 
.navbar-inverse{ 
    background-color: #0083A2; 
} 

/* DatasystemsEC tab */ 
.navbar-inverse .container-fluid .navbar-header .navbar-brand { 
    color : white; 
} 

/* Tab properties from navbar */ 
.navbar .nav > li > a { 
    color: white; 
} 

.navbar .nav > li > a:hover{ 
    color: #454545; 
} 

.active { 
    background-color: #454545; 
} 

h1, h2, h4 { 
    color: #0083A2; 
} 


/* Define button properties */ 
.button { 

    display: inline; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 8px; 
    font-size: 16px; 
    background-color: #e7e7e7; 

    -webkit-transition-duration: 0.2s ; 
    transition-duration: 0.2s ; 
} 

/* Define form fields properties */ 
.form-fields { 
    border-radius: 8px; 
    margin-right: auto; 
} 

.col-sm-6 { 
    display:inline-block; 
    margin-left : 10px; 
    width: 30%; 
    list-style: None; 
} 

.col-sm-8 { 
    list-style: initial; 
} 

.col-sm-10 { 
    display:inline-block; 
    margin-left : 10px; 
    width: 800%; 
    list-style: None; 
} 

/* Hoover button properties */ 
.button:hover { 
    background-color: #0083A2; 
    color: #454545; 
} 

/* Hoover color dropdown menu */ 
.dropdown-menu>li>a:hover { 
    color: #FFFFFF; 
    text-decoration: none; 
    background-color: #0083A2; 
} 
/* I'm not sure for this part ! */ 
.navbar-inverse .container-fluid .navbar-header .dropdown open > .active { 
    background-color: white; 
} 

私を助けることができますか？

ありがとうございます！

EDIT：

Firebugを持つ別の絵があなたを助けることができる：最後のCSSルールで

Answer 1

を、.dropdown.openへ.dropdown openを変更してみてください。