title: How to set focus in li elements using tabindex
body: <p>I'm using <code>ul</code> to show the navigation bar in my homepage. I want to show a different color to any navigation bar which is focused. How  can I do that on element <code>li</code></p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="menubar"&gt;
          &lt;ul id="menu"  &gt;
            &lt;!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --&gt;
  
            &lt;li tabindex="1"&gt;&lt;a href="#" &gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li tabindex="1" &gt;&lt;a href="#" &gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li tabindex="1" &gt;&lt;a href="#" &gt;Publications&lt;/a&gt;&lt;/li&gt;
               &lt;li tabindex="1" &gt;&lt;a href="#" &gt;News&lt;/a&gt;&lt;/li&gt;
            &lt;li tabindex="1"&gt;&lt;a href="#" &gt;Members&lt;/a&gt;&lt;/li&gt;
            &lt;li  tabindex="1"&gt;&lt;a href="#" &gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
     </code></pre>
  </div>
  </div>
  </p>
  
  <p>and style I'm trying is </p>
  
  <pre><code> background: #00C6F0;
  </code></pre>
  
  <p>But due to some unknown reason I"m unable to do so . Please help</p>