how to make a nav tab active

on this site here, I want to make the horizontal navigation tab active when it's clicked upon. For example, I'd like to turn the color of the 'amenities' tab to pink when it's clicked upon and made active.



But I don't know how to do that. Here is what I have for my css and markup;

#nav ul#navlist li.active a {color: white; padding: 0; margin:0;}

#nav ul#navlist li.active a:hover {color: pink;}


Here is my HTML;

<div id="navwrapper">
	<div id="nav">
		<ul id="navlist">

<li class="active"><txp:section name="home" link="1" title="1" /></li>
<li class="active"><txp:section name="community" link="1" title="1" /></li>
<li class="active"><txp:section name="amenities" link="1" title="1" /></li>
<li><txp:section name="floorplans" link="1" title="1" /></li>
<li><a href="/other/maintenance-request">Maintenance Request</a></li>
<li><a href="/other/resident-comments">Resident Comments</a></li>

	</ul>
		</div><!-- end nav-->
</div>

HTML:

 

You can not have all three classes "active" in your html ...
And do you want the background to be pink or just link color ?

 

Chanage your css to:

#nav ul#navlist li a   {color: white; padding: 0; margin:0;}
#nav ul#navlist li.active a   {color: pink; padding: 0; margin:0;}

#nav ul#navlist li a:hover {color: pink;}

Code (markup):

or
Chanage your css to:

ul#navlist li a   {color: white; padding: 0; margin:0;}
ul#navlist li.active a   {color: pink; padding: 0; margin:0;}

ul#navlist li a:hover {color: pink;}

Code (markup):