title: active anchor tag background color
body: <p>I have jsp page built with struts2 tiles which has vertical Menu on the left hand side. Upon selecting a Menu I want to keep the background of the selected menu's background color to white. The action will be smiler to tab selection. I have googled for solution but no luck. The effect is working for hover action but the background color is not staying consistently.</p>
  
  <p>Below is my html code with css.</p>
  
  <pre><code>ul.v_menu li a
  {   
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  text-align:left;    
  color: #fff;
  }
  ul.v_menu li a:hover,ul.v_menu li a.active
  {
  color:black;
  background: white;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;ul class="v_menu"&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;DashBoard&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;tags:a action="viewIncomeGrid"&gt;Income&lt;/tags:a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Expense&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Category&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Payee&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Tiles:</p>
  
  <pre><code>  &lt;definition name="myBaseLayout" template="/MyBaseLayout.jsp"&gt;
         &lt;put-attribute name="title" value="M-Manager"/&gt;
         &lt;put-attribute name="headerMenu" value="/Banner.jsp"/&gt;
         &lt;put-attribute name="vMenu" value="/vMenu.jsp"/&gt;
         &lt;put-attribute name="body" value="/Body.jsp"/&gt;
         &lt;put-attribute name="footer" value="/Footer.jsp"/&gt;
     &lt;/definition&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/D8O0r.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D8O0r.gif" alt="apache tiles Vertical Menu&#39;s page layout"></a></p>
  
  <p>The required behaviour is working for the <code>&lt;li&gt;&lt;a href="#"&gt;DashBoard&lt;/a&gt;&lt;/li&gt;</code> menu item as there is no <strong>action</strong> mapped to this anchor tag. But If we map any action to the link and upon clicking the link the entire page is getting refreshed and the right side body part is having the desired page but the left hand side menu for which I have set the <strong>hover,active,focus</strong> behaviours either by css or by jQuery are getting lost. How to fix this?</p>