title: How to show user which option of the menu bar is selected in a web page
body: <p>I have a HTML menu-bar in a web page and all the pages in the web page has it. When I select an option in this menu-bar I want the user to identify which option has the user selected (Or which page is the user is in)when he navigates through the whole web page. This could be identified by changing the color of that particular option. The code of the menu bar is written below,</p>
  
  <pre><code>&lt;style&gt;
  /* Stylesheet */
  #cssmenu &gt; ul{
      list-style: none;
      margin: 0;
      padding: 0;
      vertical-align: baseline;
      line-height: 1;
  }
  
  /* The container */
  #cssmenu &gt; ul {
      display: block;
      position: relative;
      width: 150px;
  }
  
      /* The list elements which contain the links */
      #cssmenu &gt; ul li {
          display: block;
          position: relative;
          margin: 0;
          padding: 0;
          width: 150px;   
      }
  
          /* General link styling */
          #cssmenu &gt; ul li a {
              /* Layout */
              display: block;
              position: relative;
              margin: 0;
              border-top: 1px dotted #fff;
              border-bottom: 1px dotted #d9d9d9;
              padding: 11px 20px;
              width: 110px;
  
              /* Typography */
              font-family:  Helvetica, Arial, sans-serif;
              color: #3dafea;
              text-decoration: none;
              text-transform: uppercase;
              text-shadow: 0 1px 0 #fff;
              font-size: 13px;
              font-weight: 300;
  
              /* Background &amp; effects */
              background: #eaeaea;
          }
  
          /* Rounded corners for the first link of the menu/submenus */
          #cssmenu &gt; ul li:first-child&gt;a {
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              border-top: 0;
          }
  
          /* Rounded corners for the last link of the menu/submenus */
          #cssmenu &gt; ul li:last-child&gt;a {
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 4px;
              border-bottom: 0;
          }
  
  
          /* The hover state of the menu/submenu links */
          #cssmenu &gt; ul li&gt;a:hover, #cssmenu &gt; ul li:hover&gt;a {
              color: #fff;
              text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
              background: #54cdf1;
              background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
              background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
              background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
              background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
              border-color: transparent;
          }
  
          /* The arrow indicating a submenu */
          #cssmenu &gt; ul .has-sub&gt;a::after {
              content: '';
              position: absolute;
              top: 16px;
              right: 10px;
              width: 0px;
              height: 0px;
  
              /* Creating the arrow using borders */
              border: 4px solid transparent;
              border-left: 4px solid #3dafea; 
          }
  
          /* The same arrow, but with a darker color, to create the shadow effect */
          #cssmenu &gt; ul .has-sub&gt;a::before {
              content: '';
              position: absolute;
              top: 17px;
              right: 10px;
              width: 0px;
              height: 0px;
  
              /* Creating the arrow using borders */
              border: 4px solid transparent;
              border-left: 4px solid #fff;
          }
  
          /* Changing the color of the arrow on hover */
          #cssmenu &gt; ul li&gt;a:hover::after, #cssmenu &gt; ul li:hover&gt;a::after {
              border-left: 4px solid #fff;
          }
  
          #cssmenu &gt; ul li&gt;a:hover::before, #cssmenu &gt; ul li:hover&gt;a::before {
              border-left: 4px solid rgba(0, 0, 0, .25);
          }
  
  
          /* THE SUBMENUS */
          #cssmenu &gt; ul ul {
              position: absolute;
              left: 150px;
              top: -9999px;
              padding-left: 5px;
              opacity: 0;
              /* The fade effect, created using an opacity transition */
              -webkit-transition: opacity .3s ease-in;
              -moz-transition: opacity .3s ease-in;
              -o-transition: opacity .3s ease-in;
              -ms-transition: opacity .3s ease-in;
          }
  
          /* Showing the submenu when the user is hovering the parent link */
          #cssmenu &gt; ul li:hover&gt;ul {
              top: 0px;
              opacity: 1;
          }
  &lt;/style&gt;
   &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Does anybody know how to do it? 
  Thanks.</p>