Question

我是HTML/CSS的初学者，我的HTML和CSS脚本有问题。我正在尝试更改background color active navbar tab，当它显示我的dropdown-menu时（您可以在我的脚本后看到图片juste）但暂时没有效果。可能是因为我没有很好地编写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;
}

你能帮帮我吗？

谢谢！

编辑：

Firebug的另一张照片可以帮到你：

Answer 1

在上一个CSS规则中，尝试将.dropdown open更改为.dropdown.open。

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

1 个答案: