Html 从活动导航栏选项卡更改背景颜色

我是

HTML/CSS

的初学者，我的HTML和CSS脚本有问题。当显示我的

下拉菜单时，我试图从
活动导航栏选项卡更改
背景色
（您可以在我的脚本之后看到图片），但暂时没有效果。可能是因为我没有很好地编写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>

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

你能帮我吗

谢谢

编辑：

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

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

另一张Firebug图片可以帮助您：

在上一个CSS规则中，尝试将
.dropdown open
更改为
.dropdown.open
 它不起作用：/我尝试了很多东西，但目前什么都没有：/如果你能提供一个小提琴或一个实时网站，我可以帮助你更不幸的是不能，因为我在本地主机上工作。。我在问题中添加了第二张带有Firebug的图片。希望能帮助您：/啊，我明白了，您需要
.dropdown。打开
相反，当您有两个用HTML空格分隔的类时，您需要将它们与CSSI中的
下拉列表组合。打开
但没有任何更改。。。我尝试了这里给出的解决方案：但再一次：什么都没有。。。惊人的…可能的复制品