将活动类添加到侧边栏中的子菜单标题[Bootstrap]

Question

我需要一些帮助。

我有一个带有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;
}