Bootstrap菜单焦点背景颜色

Question

我试图在Bootstrap中构建一个简单的向下钻取。当用户选择＆＃34;行＆＃34;时，我想要改变背景颜色以指示＆＃34; row＆＃34;被选中。它只能在我想要的第一级行上运行。

这是基本的HTML：

<div class="container">
  <ul class="nav nav-drilldown" id="Menu">
    <li>
      <a href="#" data-target="#a" data-parent="Menu" data-toggle="collapse">Thing the first</a>
      <ul class="collapse" id="a">
      <li><a href="#" data-target="#a-child-1" data-parent="a" data-toggle="collapse">child 1</a></li>
          <ul class="collapse" id="a-child-1">
            <li>
              <div class="row">
                <div class="col-md-6">something</div>
                <div class="col-md-3">goes</div>
                <div class="col-md-3">here</div>                
              </div>

            </li>
          </ul>
      </ul>
    </li>
  </ul>
</div>

CSS：

.nav-drilldown:focus {
  background-color: #eee;
}

.nav-drilldown li li a:focus {
  background-color: #FF0000;
}

.nav-drilldown li a:focus {
  background-color: #eee;
}

对于第二级，锚的文本部分会更改背景颜色。我知道你不能在<li>上设置选中，但我不明白为什么第二级不像第一级那样。我无法获得第三级别的任何东西。

等级1：

等级2：

JSFiddle

Answer 1

我认为这只是锚标签上的填充问题。在顶层，您有10px的顶部和底部填充，在第二级锚标签上，您没有填充。因此，如果您想要类似的行为，可以添加：

.nav-drilldown li li a {
  padding: 10px 15px;
}