title: How to change the Menu colour when selected?
body: <p>I have created a menu in my asp.net website and I want the active Menu item in the menu to be highlighted when it is clicked. That is usually the menu is White but when the user choose any of the menu then it should become red. Please find below what I have tried so far:</p>
  
  <p>Jquery:</p>
  
  <pre><code> &lt;head runat="server"&gt;
     &lt;script type="text/javascript"&gt;
      $('.thumbnail').click(function (e) {
          $('.thumbnail').removeClass('selected');
          $(this).addClass('selected');
      });
    &lt;/script&gt;
   &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
   &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>aspx page:</p>
  
  <pre><code> &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="Default.aspx" class="thumbnail"&gt;Dashboard&lt;/a&gt; //I want this
                 menu option to be Red when in the Dashboard page.
  
                  &lt;ul&gt;
                      &lt;a href="Default.aspx" class="hover"&gt;
                          &lt;li&gt;Servie Details&lt;/li&gt;
                      &lt;/a&gt;&lt;a href="Dashboard_totalusersDaily.aspx" class="hover"&gt;
                          &lt;li&gt;Subscribers History&lt;/li&gt;
                      &lt;/a&gt;&lt;a href="WhiteList.aspx" class="hover"&gt;
                          &lt;li&gt;Whitelist &lt;/li&gt;
                      &lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="mnggroup.aspx" class="thumbnail"&gt;Subscribers&lt;/a&gt; //I want this
                Subscrivers Menu Option to be Red when user is in this page
                  &lt;ul&gt;
                      &lt;a href="mnggroup.aspx" class="hover"&gt;
                          &lt;li&gt;Group&lt;/li&gt;
                      &lt;/a&gt;
                      &lt;a href="#" class="hover"&gt;
                          &lt;li&gt;Subscribers Chart&lt;/li&gt;
                      &lt;/a&gt;
                      &lt;a href="#" class="hover"&gt;
                          &lt;li&gt;Subscribers Chart by Date &lt;/li&gt;
                      &lt;/a&gt;
                      &lt;a href="#" class="hover"&gt;
                          &lt;li&gt;Inactive Subscribers Chart&lt;/li&gt;
                      &lt;/a&gt;
                  &lt;/ul&gt;
  
              &lt;/li&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>     .thumbnail {
      display: block;
      line-height: 2.5em;
      margin-right: 0px;
      padding: 8px 14px 8px 14px;
      color: #3d3737;
      font-weight: bold;
      font-size: 0.8em;
      text-decoration: none;
    }
  
    #nav ul li .selected {
      color: #ffffff;
      background-color: transparent;
      background-image: url(../Img/navaktiv.jpg);
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>I got this above code idea from this link: <a href="https://stackoverflow.com/questions/21225745/how-to-change-menu-background-color-when-selected">how to change menu background color when selected?</a></p>
  
  <p>After trying this above code all of my menu items remaining white. When I choose any option it is not becoming red. Please help. Thanks in advance.</p>