Ändern Hintergrundfarbe von der aktiven Navigationsleiste

Question

Ich bin ein Anfänger mit HTML/CSS und ich habe ein Problem mit meinem HTML-und CSS-Skript. Ich versuche, die background color von active navbar tab zu ändern, wenn es meine dropdown-menu anzeigt (Sie können das Bild juste nach meinem Skript sehen), aber keinen Effekt für den Moment. Wahrscheinlich weil ich den CSS-Teil nicht gut schreibe (letzte Zeilen aus meiner CSS-Datei).

Das ist mein HTML-Code:

<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> 

Und ich will die schwarze Hintergrundfarbe auf dieser Registerkarte ändern:

Dies ist meine CSS-Datei:

/* 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; 
} 

Können Sie mir helfen?

Danke!

EDIT:

Ein weiteres Bild mit Firebug könnte Ihnen helfen:

Answer 1

Im letzten CSS-Regel, versuchen .dropdown open zu .dropdown.open ändern.