Navigationbar light when the user is on that page - html

Question

Working on a navigation menu but the question I have is how to make the menu buttom light green when I am on the site i pressed so I can see that I am inside Dagvakt for example ?
The menu only light green when the mouse is over it also should light when the person is in that site. Jsfiddle: http://jsfiddle.net/EkLPG/
Html:
<ul id="nav">
<li><img src="images/home.png" /> Forside
</li>
<li><span><img src="images/temperatur.png" /> Måling</span>
</li>
<li><span><img src="images/sol.png" /> Dagvakt</span>
</li>
<li><img src="images/kveld.png" /> Kveldsvakt
</li>
<li><img src="images/vaske.png" /> Kontroll CM
</li>
<li><img src="images/søk.png" /> Søk
</li>
<li><img src="images/top2.png" /> Statistikk
</li>
<li><img src="images/top3.png" /> Rapport
</li>
</ul>
Css
ul#nav {
width: 1050px;
float: right;
font-family: Trebuchet MS, sans-serif;
font-size: 0;
padding: 5px 5px 5px 0;
background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */
}
ul#nav, ul#nav ul {
list-style: none;
margin: 10px 0px 0px 0px;
}
ul#nav, ul#nav .subs {
background-color: #444;
border: 0px solid #454545; /* Border */
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
ul#nav .subs {
background-color: #fff;
border: 2px solid #222;
display: none;
float: left;
left: 0;
padding: 0 6px 6px;
position: absolute;
top: 100%;
width: 300px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
ul#nav li:hover>* {
display: block;
}
ul#nav li:hover {
position: relative;
}
ul#nav ul .subs {
left: 100%;
position: absolute;
top: 0;
}
ul#nav ul {
padding: 0 5px 5px;
}
ul#nav .col {
float: left;
width: 50%;
}
ul#nav li {
display: block;
float: left;
font-size: 0;
white-space: nowrap;
}
ul#nav>li, ul#nav li {
margin: 0 0 0 5px;
}
ul#nav ul>li {
margin: 5px 0 0;
}
ul#nav a:active, ul#nav a:focus {
outline-style: none;
}
ul#nav a {
border-style: none;
border-width: 0;
color: #181818;
cursor: pointer;
display: block;
font-size: 13px;
font-weight: bold;
padding: 8px 10px;
text-align: left;
text-decoration: none;
text-shadow: #fff 0 1px 1px;
vertical-align: middle;
}
ul#nav ul li {
float: none;
margin: 6px 0 0;
}
ul#nav ul a {
background-color: #fff;
border-color: #efefef;
border-style: solid;
border-width: 0 0 1px;
color: #000;
font-size: 11px;
padding: 4px;
text-align: left;
text-decoration: none;
text-shadow: #fff 0 0 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
ul#nav li:hover>a {
border-style: none;
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-shadow: #181818 0 1px 1px;
}
ul#nav img {
border: none;
margin-right: 8px;
vertical-align: middle;
}
ul#nav span {
background-position: right center;
background-repeat: no-repeat;
display: block;
overflow: visible;
padding-right: 0;
}
ul#nav ul li:hover>a {
border-color: #444;
border-style: solid;
color: #444;
font-size: 11px;
text-decoration: none;
text-shadow: #fff 0 0 0;
}
ul#nav > li >a {
background-color: transpa;
height: 25px;
line-height: 25px;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
ul#nav > li:hover > a {
background-color: #009900;
line-height: 25px;
}

Answer 1

HTML
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">profile</li>
<li>Contact</li>
</ul>
</div>
CSS
ul
{
list-style-type:none;
width:500px;
}
li
{
float:left;
display:inline-block;
text-align:center;
width:100px;
background-color:#003366;
padding:10px;
}
a
{
color:white;
text-decoration:none;
}
li.active {
background-color:red;
text-transform:uppercase;
}
li.active a{
color:white;
text-transform:uppercase;
}
Jquery:
$('li').on('click', function(){
$('li').removeClass('active');
$(this).toggleClass('active');
})
Fiddle
Demo
Your's Working Fiddle