Question

当我使用Django project时，我在Bootstrap navbar中遇到了一个小问题。

我有dropdown-toggle menu和hover effect黑色dropdown-menu background color。但当我将鼠标放在其他地方时，背景颜色变为白色而不是黑色。

我不会在我的脚本中克服它将其修复为黑色。

我放了两个截图来说明我的问题：

第二个屏幕：

我对此部分的HTML脚本如下所示：

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsCORE </a>
                </div>


                <ul class="nav navbar-nav">
                    <li><a class="dropdown-toggle" href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li> 
                    {% if user.is_authenticated %}
                    <li class = "dropdown">
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-info-sign"> </span> Informations Institution
                            <b class = "caret"></b>
                        </a>
                            <ul class = "dropdown-menu">
                                <li><a href = "{% url "InstitutionFormulaire" %}"> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de l'institution </a></li>
                                <li><a href = "{% url "InstitutionResume" %}"> <span class="glyphicon glyphicon-home"></span> Consulter les informations de l'institution </a></li>
                            </ul>
                    </li>


                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
                        </span>  Gestion des Fiches d'Identifications <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="{% url 'Home' %}"> <span class="glyphicon glyphicon-home"></span> Accueil Fiches d'Identifications</a></li>
                            <li><a href="{% url 'Statistiques' %}"> <span class="glyphicon glyphicon-cog"></span> Statistiques</a></li>

                            <li class="dropdown-submenu">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-user"></span>
                                    </span> Partie Individus 
                                </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="{% url "IndividuFormulaire" %}">Création Fiches d'Identifications </a></li>
                                        <li><a href="{% url "IndividuRecherche" %}">Recherche Fiches d'Identifications</a></li>
                                        <li><a href="{% url "Consultation" %}">Consultation Fiches d'Identifications</a></li>
                                        <li><a href="{% url "IdentityChoice" %}">Edition partielle Fiches d'Identifications</a></li>
                                        {% if request.user|has_group:"admin" %}
                                        <li><a href="{% url "Edition" %}">Edition Fiches d'Identifications</a></li>
                                        <li><a href="{% url "Suppression" %}">Suppression Fiches d'Identifications</a></li>
                                        {% endif %}
                                    </ul>
                            </li>

CSS部分：

.dropdown-submenu{
        position:relative;
        }

    .dropdown-submenu>.dropdown-menu{
        top:0;
        left:100%;
        margin-top:0%;
        margin-left:0%;
        -webkit-border-radius:0 6px 6px 6px;
        /*-moz-border-radius:0 6px 6px 6px;*/
        border-radius:0 6px 6px 6px;
        }

    .dropdown-submenu>a:after{
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        /*border-width:3% 0 5px 5px;*/
        border-left-color:#cccccc;
        margin-top:5px;
        margin-right:-10px;
        }

    .dropdown-submenu:hover>a:after{
        border-left-color:#555;
        }

    .dropdown-submenu.pull-left{
        float:none;
        }

    .dropdown-submenu.pull-left>.dropdown-menu{
        left:-100%;
        margin-left:10px;
        -webkit-border-radius:6px 0 6px 6px;
        /*-moz-border-radius:6px 0 6px 6px;*/
        border-radius:6px 0 6px 6px;
        }

    div.alert.alert-success.alert-dismissible {
        width:63%;
        margin-left: 10%;   
    }

    ul.dropdown-menu {
        background-color: #0083A2;
    }


    ul.dropdown-menu:active {
        background-color: black;
    }

    /*.sidebar-only ul.dropdown-menu > li.dropdown-submenu.open > a.dropdown-toggle {
        background-color: black;
        margin-right:15%;
        }*/

    ul.dropdown-menu > li.dropdown-submenu:hover > a.dropdown-toggle, a.dropdown-toggle:hover {
        background-color: black;
        color : white;
        }
    /* Gestion de chaque ligne du menu sans sous-menu */
    ul.dropdown-menu > li:hover > a{
        background-color: black;
        color: white;
    }

Answer 1

我找到了解决方案，我得到了：

var myString;    
myString = 42;    
document.write("myString is currently: " + myString);    
myString = myString + 1;    
document.write("\n myString is currently: " + myString);

它之所以有用，是因为我添加了ul.dropdown-menu > li.dropdown-submenu:hover > a.dropdown-toggle, a.dropdown-toggle:hover, a.dropdown-toggle:visited { background-color: black !important; color : white; }选择器

Answer 2

尝试使用重要内容可能存在其他冲突：

ul.dropdown-menu > li.dropdown-submenu:hover > a.dropdown-toggle, 
a.dropdown-toggle:hover {
    background-color: black !important;
    color : white;
}
/* Gestion de chaque ligne du menu sans sous-menu */
ul.dropdown-menu > li:hover > a{
    background-color: black !important;
    color: white;
}

抱歉使用来自mobi的格式错误...告诉我发生了什么

下拉切换背景颜色的问题

2 个答案: