Question

Here are the tabs in the master page:

<nav>
     <ul id="menu">
         <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
         <li><%: Html.ActionLink("About", "About", "Home")%></li>
     </ul>
</nav>

And here is the css:

ul#menu li.selected a {
    background-color: #a6e2a6;
    color: #000;
}

But no matter what I do to background-color, it always remains the same. How to change the background color and the height of the selected tab?

Answer 1

The :active selector doesn’t style the link that corresponds with the current page, but it styles the link on which is the user is currently clicking.

The :active selector is really similar to the :hover selector, which styles the link when the user is hovering over it. They are both selectors which are responding to mouse actions.

Here is a sample which shows the behavior rather obvious: http://jsfiddle.net/NuExP/

Edit after you modified the question:

Like @o.v. said, there is no selector for the current active page, so his solution to add a class to the link to indicate that it is the current active page is correct.