title: Pure CSS menu with highlighting the page which I am presently on
body: <p>I am trying to make a purely css / html structure for menu which has background of the active menu link page with a different color. For that I am using the <code>:checked</code> selector.  I am able to make this happen by clicking on the input elements but when I click on the actual links themselves, nothing happens.</p>
  
  <p>I do not want to have the menu code in every page of the menu and have included it in a include file. Please tell what I am not doing right. I do not want to use javascript / jquery for this purpose.</p>
  
  <p><em>Edit</em> -</p>
  
  <p>These are separate pages with separate links. I kept all the links same so as not to go outside my codepen.</p>
  
  <p>This is my codepen - <a href="https://codepen.io/anon/pen/zPrOoj" rel="nofollow noreferrer">https://codepen.io/anon/pen/zPrOoj</a> and this is my snippet - </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-css lang-css prettyprint-override"><code>.nav {
      float: left;
      width: 100%;
      background-color: rgba(248, 220, 192, 1);
      color: black;
      display: table;
      table-layout: fixed;
  }
  .nav ul {
      width: 100%;
      float: left;
      white-space: nowrap;
      display: flex;
    flex-direction: row;
   overflow: hidden;
   margin: 0;
    padding: 0;
  }
  
  .nav ul li.nav_bar {
      display: inline;
      padding: 1% 0% .5% 0.75%;
      border-right: solid 1px rgba(78, 52, 25, 1);
   flex-grow: 1;
  }
  .nav ul li a {
      color: black;
   display: block;
   
  }
  .nav ul li.active {
       background-color: rgba(103, 140, 57, 1);
    
  }
  .nav ul li.active a {
      border-bottom: none;
      padding-bottom: 4px;
   color : #ccc;
  }
  .nav ul li.nav_bar:last-child {
      border-right: none;
  }
  a.nav_bar {
      text-align: center;
  
      text-decoration: none;
      font-family: verdana;
      font-size: 16px;
  }
  a.nav_bar:hover {
      color: red;
  }
  .menu1:checked ~ ul.nav_bar&gt;.num1+li.first {
    background: blue;
  }
  .menu2:checked ~ ul.nav_bar&gt;.num2+li.second {
    background: red;
  }
  .menu3:checked ~ ul.nav_bar&gt;.num3+li.third {
    background: pink;
  }
  .menu4:checked ~ ul.nav_bar&gt;.num4+li.fourth {
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav" &gt;
  &lt;input class="menu1" id="_menu1" type="checkbox"&gt;
    &lt;input class="menu2" id="_menu2" type="checkbox"&gt;
    &lt;input class="menu3" id="_menu3" type="checkbox"&gt;
    &lt;input class="menu4" id="_menu4" type="checkbox"&gt;
    
   &lt;ul id="respons-text1" class="nav_bar"&gt;
      &lt;label class="num1" for="_menu1"&gt;
  &lt;span&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;li class="nav_bar active first"&gt;&lt;a class="nav_bar" href="#"&gt;home&lt;/a&gt;
    &lt;/li&gt;
      &lt;label class="num2" for="_menu2"&gt;
  &lt;span&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;li class="nav_bar second"&gt;&lt;a class="nav_bar" href="#"&gt;about&lt;/a&gt;
    &lt;/li&gt;
      &lt;label class="num3" for="_menu3"&gt;
  &lt;span&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;li class="nav_bar third"&gt;&lt;a class="nav_bar" href="#"&gt;work areas&lt;/a&gt;
    &lt;/li&gt;
      &lt;label class="num4" for="_menu4"&gt;
  &lt;span&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;li class="nav_bar fourth"&gt;&lt;a class="nav_bar" href="#"&gt;contact&lt;/a&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>