CSS Nav bar current/active color link - css

Question

First homepage. Nav bar color for current page isn't working. Suggestions? CSS below. Thanks.
HTML
<ul class="nav">
<li>HOME</li>
<li>PRODUCTS</li>
<li>STAFF</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
CSS
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:20;
padding:0;
text-align:center;
font-family:sans-serif;
}
.nav li{
display:inline-block;
color:#493D26;
font-size: 15px;
font-family:sans-serif;
}
.nav a{
display:inline-block;
border-width:1px 0;
padding:15px;
text-decoration:none;
color:#493D26;
font-size: 17px;
font-style:bold;
text-transform:capitalize;
}
ul.nav a:hover{
color: #6CBB3C;
}
ul.nav a:current{
color: #6CBB3C;
}

Answer 1

You can use this css code also.
a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.
If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -
ul.nav a:visited {
color: #6CBB3C;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).

Answer 2

check the snippet..
.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 20;
padding: 0;
text-align: center;
font-family: sans-serif;
}
.nav li {
display: inline-block;
color: #493D26;
font-size: 15px;
font-family: sans-serif;
}
.nav a {
display: inline-block;
border-width: 1px 0;
padding: 15px;
text-decoration: none;
color: #493D26;
font-size: 17px;
font-style: bold;
text-transform: capitalize;
}
ul.nav a:hover {
color: #6CBB3C;
}
ul.nav a:visited {
color: #6CBB3C;
}
<ul class="nav">
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>STAFF
</li>
<li>LINKS
</li>
<li>CONTACT
</li>
</ul>

Answer 3

Oh dear..
Try .nav ul instead of ul.nav :)

Answer 4

You can use jQuery trick:
You should add jQuery library file fist:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.nav li a").each(function()
{
if(this.href==window.location.href)
{
$(this).addClass('current');
$(this).removeAttr('href');
}
});
});
</script>
and add this css:
ul.nav a.current{
color: #6CBB3C;
}