'active anchor tag background color

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.

Below is my html code with css.

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;
}

HTML

 <ul class="v_menu">

        <li><a href="#">DashBoard</a></li>
        <li><tags:a action="viewIncomeGrid">Income</tags:a></li>
        <li><a href="#">Expense</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Payee</a></li>
    </ul>

Tiles:

  <definition name="myBaseLayout" template="/MyBaseLayout.jsp">
       <put-attribute name="title" value="M-Manager"/>
       <put-attribute name="headerMenu" value="/Banner.jsp"/>
       <put-attribute name="vMenu" value="/vMenu.jsp"/>
       <put-attribute name="body" value="/Body.jsp"/>
       <put-attribute name="footer" value="/Footer.jsp"/>
   </definition>

apache tiles Vertical Menu's page layout

The required behaviour is working for the <li><a href="#">DashBoard</a></li> menu item as there is no action 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 hover,active,focus behaviours either by css or by jQuery are getting lost. How to fix this?

htmlcsstiles


Solution 1:[1]

find the working fiddel : https://jsfiddle.net/s8hLsogc/

i add some tricky selectors to catch every think under lis like so :

li:hover *

Solution 2:[2]

http://www.w3schools.com/cssref/sel_active.asp

ul.v_menu li a:active
    {
        color:black;
        background: white;
    }

Solution 3:[3]

Please check this fiddle : https://jsfiddle.net/panks_josh/1gxq8se6/

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 {
    color: white;
    background: black;
}
ul.v_menu li a:focus {
    color: white;
    background: black;
}

Please use this :Focus instead of :Active,, will surely work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hasan Daghash
Solution 2 Pankaj Joshi
Solution 3

Related Questions