我需要一些帮助。
我有一个带有5个标题的引导程序边栏,其中2个具有子菜单。对于没有子菜单的标题,主动控件似乎可以正常工作。
我无法使其用于具有子菜单的标题...
以下是边栏的代码:
<div class="sidebar">
<ul class="nav nav-pills nav-stacked" role="tablist" id="myPill">
<li role="presentation" class="active"><a href="#1" role="tab" data-toggle="tab"><span class="icon-home lg-icon" aria-hidden="true"></span><br />Header 1</a></li>
<li role="presentation"><a href="#2" role="tab" data-toggle="tab"><span class="icon-wa-infomarche lg-icon" aria-hidden="true"></span><br />Header 2</a></li>
<li role="presentation"><a href="#3" role="tab" data-toggle="tab"><span class="icon-calendar lg-icon" aria-hidden="true"></span><br />Header 3</a></li>
<li role="presentation">
<a href="#" class="droptab4" data-toggle="collapse" data-target="#submenu-1"><span class="icon-niveau lg-icon" aria-hidden="true"></span> <br /> Header 4 </a>
<ul id="submenu-1" class="collapse" style="text-align: left; padding-left: 5px">
<li role="presentation" style="height: 35px"><a href="#40" role="tab" data-toggle="tab">Sub 0</a></li>
<li role="presentation" style="height: 35px"><a href="#41" role="tab" data-toggle="tab">Sub 1</a></li>
<li role="presentation" style="height: 35px" style="height: 25px"><a href="#42" role="tab" data-toggle="tab">Sub 2</a></li>
<li role="presentation" style="height: 35px"><a href="#43" role="tab" data-toggle="tab">Sub 3</a></li>
</ul>
</li>
<li role="presentation" >
<a href="#" class="droptab5" data-toggle="collapse" data-target="#submenu-2"><span class="icon-wa-loupe lg-icon" aria-hidden="true"></span> <br /> Header 5</a>
<ul id="submenu-2" class="collapse" style="text-align: left; padding-left: 5px">
<li role="presentation" style="height: 35px"><a href="#50" role="tab" data-toggle="tab">Sub 0</a></li>
<li role="presentation" style="height: 35px"><a href="#51" role="tab" data-toggle="tab">Sub 1</a></li>
<li role="presentation" style="height: 35px"><a href="#52" role="tab" data-toggle="tab">Sub 2</a></li>
<li role="presentation" style="height: 35px"><a href="#53" role="tab" data-toggle="tab">Sub 3</a></li>
</ul>
</li>
</ul>
</div>
这是CSS:
.nav-pills>li.active>a, .nav-pills>li.active>a:focus {
color: #0072ed;
background-color: #ffffff;
border-left: 3px solid #0072ed;
}