How do I get my nav panel to change color based on the active page?

Question

Currently working on my first solo project out of college for the university's technology department. The home page looks like this.

What I want to happen is the navigation (Home, Contact, etc.) to appear as it does on hover when the user is on that page. Short of having a second class or id to denote it on it's respective pages is there another way?

HTML

<div id="wrap">
<div id="header">
    <img src="">
    <ul>
        <li><a href="#">EXTONE</a>
        </li>|
        <li><a href="#">EXTTWO</a>
        </li>|
        <li><a href="#">EXTTHREE</a>
        </li>
    </ul>
</div>
<div id="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
        <li><a href="news.html">News</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="#">Submit a Ticket</a>
        </li>
    </ul>
</div>

CSS

html, body {
margin: 0;
padding: 0;
color: #222;
background: -webkit-linear-gradient(#0026aa, white);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0026aa, white);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0026aa, white);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#0026aa, white);
/* Standard syntax */
}
body {
padding: 10px;
font: 76%/150%"Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana,      Geneva, Arial, Helvetica, sans-serif;
}
#nav {
margin: 0;
padding: 0;
background: none;
width: 100%;
float: left;
border-bottom: 3px solid #cbcc9d;
}
#nav li {
display: inline;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
color: #000;
background: #cbcc9d;
padding: 20px 40px 4px 10px;
float: left;
width: auto;
border-right: 1px solid #42432d;
text-decoration: none;
font: bold 1em/1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#nav a:hover, #nav a:focus {
color: #fff;
background: #727454;
}
#nav li:first-child a {
border-left: 1px solid #42432d;
}
#home #nav-home a, #contact #nav-contact a, #news #nav-news a, #services     #nav-services a {
background: #e35a00;
color: #fff;
text-shadow: none;
}
#home #nav-home a:hover, #contact #nav-contact a:hover, #news #nav-news     a:hover, #services #nav-services a:hover {
background: #e35a00;
}
#nav a:active {
background: #e35a00;
color: #fff;
}
#wrap {
width: 960px;
margin: 0 auto;
background: none;
}
#header {
padding: 5px 10px;
background: none;
padding-top: 25px;
text-align: right;
}
#header li {
display: inline;
list-style-type: none;
}
#header li a {
text-decoration: none;
color: #cbcc9d;
font-weight: bold;
}    
#header img {
display: block;
float: right;
}
h1 {
margin: 0;
}
#main {
float: left;
width: 530px;
height: 763px;
padding: 10px;
background: white;
border-right: 1px solid #cbcc9d;
}
h2 {
margin: 0 0 1em;
}
#sidebar {
float: right;
width: 350px;
height: 763px;
padding: 10px;
background: white;
padding-right: 4em;
}
#footer {
clear: both;
padding: 5px 10px;
background: #cc9;
}
#footer p {
margin: 0;
}
* html #footer {
height: 1px;
}
#ServicesListCol {
float: left;
overflow-y: scroll;
overflow-x: hidden;
display: block;
width: 530px;
height: 665px;
}
#ServicesListCol h4 {
font-weight: bold;
font-size: 12pt;
text-decoration: none;
}
#ServicesListCol ul li a {
text-decoration: none;
font-size: 10pt;
font-weight: normal;
}
#LetterNav {
text-align: center;
}
#LetterNav a {
text-decoration: none;
}
a {
text-decoration: none;
color: #0026aa
}
a:visited {
color: #0026aa
}
a:hover {
text-decoration: underline;
}

I'm using some JavaScript on later pages and I have a Spry accordion happening on another but I don't know outside the XHTML, CSS3, & JavaScript wheelhouses enough to do it offhand.

Answer 1

Now, to make it simple you could just add the corresponding ID to each page. Like this (In example home page is active):

HTML

<li id="active"><a href="#">Home</a> 
</li>

Then you could style the active ID for each page. Now that would be the simple and tedious way. That will NOT work though if you are using PHP include. If you are using PHP include please let me know, because I have a much better way of doing this! :)

Answer 2

I would KISS it, and use a selected class that gets applied to the selected item. You didn't say whether or not the menu is being dynamically generated on each page load, or whatever, so I can't advise in more detail about how you'd do that.