css - Bootstrap 菜单焦点背景颜色

Question

我正在尝试在 Bootstrap 中构建一个简单的向下钻取。当用户选择一个“行”时，我希望背景颜色发生变化以指示选择了哪个“行”。它只在第一级行上像我想要的那样工作。

这是基本的 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;
}

对于第二层， anchor 的文本部分改变了背景颜色。我知道你不能在 <li> 上设置 selected ，但我不明白为什么第二层的行为不像第一层。我无法达到第三级。

一级:

2 级:

JSFiddle

Answer 1

我相信这只是 anchor 标记上的填充问题。在顶层，您有 10px 的顶部和底部填充，而在第二层 anchor 标记上，您没有填充。所以，如果你想要类似的行为，你可以添加:

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