我正在尝试处理我的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)”
但到目前为止,这两个菜单都不是“可以收集的”,如图所示:
我也有一个.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;
}
我的剧本出了什么问题?我找不到错误的位置:/
谢谢!