Bootstrap menu focus background color
<p>I'm trying to build a simple drilldown in Bootstrap.  When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.  </p>

<p>Here's the basic HTML:</p>

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

            &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And the CSS:</p>

<pre><code>.nav-drilldown:focus {
  background-color: #eee;
}

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

.nav-drilldown li a:focus {
  background-color: #eee;
}
</code></pre>

<p>For the second level, on the text part of the anchor changes background color.  I get that you can't set selected on a <code>&lt;li&gt;</code>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.</p>

<p>Level 1:
<a href="https://i.stack.imgur.com/RggqE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RggqE.png" alt="enter image description here"></a></p>

<p>Level 2:
<img src="https://i.stack.imgur.com/EVFAU.png" alt="enter image description here"></p>

<p><a href="https://jsfiddle.net/johnyaya/7xsz1w8s/3/" rel="nofollow noreferrer">JSFiddle</a></p>