Active CSS Not Being Recognized

Question

Feel like I'm missing something simple but been staring at it for too long so any help is appreciated.

Have a horizontal nav where I would like an element to have a different background color when it is active / the current page. I've tried various class tags with no success. Note that I can't just use the .active tag as I need this to function solely on the added nav.

Here's what I have and what I've tried:

CSS CODE

.nav2 {
  border: 1px solid #e7e7e7;
  border-width: 1px 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
  overflow: hidden;
}
.nav2 li {
  Float: left;
}
.nav2 a {
  display: block;
  padding: 10px 20px;
  color: #666;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  font-size: 16px;
  text-decoration: none;
}
.nav2 a:active {
  background-color: #0066CC;
  color: white;
}
.nav2 a:hover {
  background-color: #555;
  color: white;
}

---

ATTEMPT 1 (in LI tag-active only)

<ul class="nav2">
   <li class="active"><a href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

ATTEMPT 2 (in A tag-active only)

<ul class="nav2">
   <li><a class="active" href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

ATTEMPT 3 (in LI tag)

<ul class="nav2">
   <li class="nav2 active"><a href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

ATTEMPT 4 (in A tag)

<ul class="nav2">
   <li><a class="nav2 active" href="one.aspx">Page One</a></li>
   <li><a href="two.aspx">Page Two</a></li>
   <li><a href="three.aspx">Page Three</a></li>
</ul>

What am I missing?

Answer 1

When a link become :active that user press mouse down, and when leave mouse,so remove active: see this(click on menu and see result):

.nav2  {
	border: 1px solid #e7e7e7;
	border-width: 1px 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
	overflow: hidden;
}

.nav2 li  {
	float: left;
}

.nav2 a  {
	display: block;
	padding: 10px 20px;
	color: #666;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 16px;
	text-decoration: none;
 }

.nav2 a:hover  {
	background-color: #555;
	color: white;
}

.nav2 a:active  {
	background-color: #0066CC;
	color: white;
}

<ul class="nav2">
   <li ><a class="active" href="#">Page One</a></li>
   <li><a href="#">Page Two</a></li>
   <li><a href="#">Page Three</a></li>
</ul>

in your case,you use of class active so you must use . and no :,like this:

.nav2  {
	border: 1px solid #e7e7e7;
	border-width: 1px 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
	overflow: hidden;
}

.nav2 li  {
	float: left;
}

.nav2 a  {
	display: block;
	padding: 10px 20px;
	color: #666;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 16px;
	text-decoration: none;
 }

.nav2 a.active  {
	background-color: #0066CC;
	color: white;
}


.nav2 a:hover  {
	background-color: #555;
	color: white;
}

<ul class="nav2">
   <li ><a class="active" href="#">Page One</a></li>
   <li><a href="#">Page Two</a></li>
   <li><a href="#">Page Three</a></li>
</ul>

If you want see active link, after each click,you must use of jquery:

$(document).ready(function() {
  $('a').click(function() {
    $('.nav2 a').removeClass('active');
      $(this).addClass('active');
  })
})

$(document).ready(function() {
	$('a').click(function() {
		$('.nav2 a').removeClass('active');
		$(this).addClass('active');
	})
})

.nav2  {
	border: 1px solid #e7e7e7;
	border-width: 1px 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
	overflow: hidden;
}

.nav2 li  {
	float: left;
}

.nav2 a  {
	display: block;
	padding: 10px 20px;
	color: #666;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 16px;
	text-decoration: none;
 }

.nav2 a.active  {
	background-color: #0066CC;
	color: white;
}


.nav2 a:hover  {
	background-color: #555;
	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="nav2">
   <li ><a class="active" href="#">Page One</a></li>
   <li><a href="#">Page Two</a></li>
   <li><a href="#">Page Three</a></li>
</ul>