Bootstrap navbar&子菜单悬停

时间:2017-04-28 10:45:33

标签: html css twitter-bootstrap

我正在尝试处理我的Bootstrap导航栏,以便显示第3个子菜单级别,但我遇到了一些问题。

这是我这部分的剧本:

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
                        </span>  Actes Etat Civil <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-user">
                                    </span> Fiches Individuelles 
                                </a>
                                    <ul class="dropdown-menu sub-menu">
                                        <li><a href="{% url "home" %}">Accueil Fiches Individuelles</a></li>
                                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                                                Création Fiches Individuelles</a>
                                                <ul class="dropdown-menu sub-menu">
                                                        <li><a href="{% url "form" %}">Création Fiches Individuelles (sans n° identification) </a></li>
                                                        <li><a href="{% url "form2" %}">Création Fiches Individuelles (avec n° identification) </a></li>
                                                </ul>
                                            </li>

                                            <li><a href="{% url "searched" %}">Consultation Fiches Individuelles</a></li>
                                            {% if request.user|has_group:"admin" %}
                                            <li><a href="{% url "edited" %}">Edition Fiches Individuelles</a></li>
                                            <li><a href="{% url "deleted" %}">Suppression Fiches Individuelles</a></li>
                                            {% endif %}
                                        </ul>
                                    </li>

我希望从这两个子菜单中悬停起来:“CréationFichesIndividuelles(sans n°identification)”和“CréationFichesIndividuelles(avec n°identification)”

但到目前为止,这两个菜单都不是“可以收集的”,如图所示:

enter image description here

我也有一个.css文件:

/* ############################################# */
/* CSS File about Identiy application properties */
/* ############################################# */

@import url("http://bootswatch.com/flatly/bootstrap.min.css");


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

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

    /* Tab properties from navbar */
    .navbar .nav > li > a {
        padding-right: -20px;
        padding-left: -20px;
        color:  white !important;
        }

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

    .active {
        background-color: #454545;
        }

    .dropdown:hover {
            background-color: #454545;
            color: white;
        }

        .dropdown-menu .sub-menu {
            left: 100%;
            position: absolute;
            top: -4px;
            visibility: hidden;
            margin-top: 0;
        }

        .dropdown-menu li:hover .sub-menu {
            visibility: visible;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }

        .navbar .sub-menu:before {
            border-bottom: 7px solid transparent;
            border-left: none;
            border-right: 7px solid rgba(0, 0, 0, 0.2);
            border-top: 7px solid transparent;
            left: -7px;
            top: 10px;
        }
        .navbar .sub-menu:after {
            border-top: 6px solid ;
            border-left: none;
            border-right: 6px solid #fff;
            border-bottom: 6px solid ;
            left: 10px;
            top: 11px;
            left: -6px;
        }

    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: 4px;
        margin-right: auto;
        width:50%;
        background-color: #f5f5f5;

        }

    label {
            width: 25%;
            background-color: #f5f5f5;
            border-radius: 8px; 
            margin-bottom: 20px;
        }

    .col-sm-8 {
        list-style: none;
        margin-left:20%;
        margin-top:-68%;
        }

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

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

    /*a.dropdown-toggle, a.dropdown {

        margin-left:-0.7vw;
        margin-right:-0.7vw;
    }*/

    .dropdown-toggle:active, .open > .dropdown-toggle {
        background-color:#454545 !important;
    }

    /* Hoover color dropdown menu */
    .dropdown-menu>li>a:hover {
    color: white;
    text-decoration: none;
    background-color: #454545;
        }

    /* Define background-color for dropdown active tab */
    .dropdown.open > .active {
        background: #FFFFFF;
        }

    footer {
        text-align: center;
        margin-bottom: 10vw;
    }

    .sidebar1 {
        background: #0083A2;
        padding:0%;
        margin-top:1vw;
        min-height: 100%;
        width:30vh;
        height:100%;
    }

    img.img-responsive.center-block {
        width:13.77vw;
        padding-right:1vw;
    }

    .list {
        color: #fff;
        list-style: none;
        padding-left: 0px;
    }
    .list::first-line {
        color: #454545;
    }

    .list> li{
        padding: 2% 0% 2% 20%;
        color:white;
    }

    ul.list li a, ul.list li a:visited {
        color: white !important;
        text-decoration: none;
    }

    ul.list li a:hover, ul.list li a:active {
        color: white !important;
        text-decoration: none;

    }

    ul.list li.active a {
        color: white !important;
        text-decoration: none;
    }

    .list > h5 > strong {
        color : white;
        padding: 2% 0% 2% 5%;
        font-size: 15px;
    }

    .list > h5 {
        padding: 2% 0% 2% 5%;
        background-color: #454545 ;
    }

    .list>li:hover {
        background-color: #454545;
        border-left: 5px solid white;
        color: white;
        font-weight: bolder;
        padding-left: 35px;
    }

    .main-content{
        text-align:center;
    }


    .navbar-right {
            /*padding-left: 400px;*/
            position:absolute; 
            right: 3vw;
        }

    .marginBottom-0 {margin-bottom:0;}
    .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;}

    .footer {
        position: absolute;
        bottom: 1vh;
        width: 99%;
        height: 6vh;
        background-color: transparent;
    }

    .container-fluid .text-muted {
    color:#0083A2 !important;
    padding-left:auto;
    padding-right:5%;
    background-color: transparent;
    }

    .footer > .container {
    padding-right: 15px;
    }

我的剧本出了什么问题?我找不到错误的位置:/

谢谢!

0 个答案:

没有答案