Changing a 'Default' state of a Menu on any given page

Changing a 'Default' state of a Menu on any given page

Hey guys.  Brand new here and pretty new to the whole JQuery thing.  I'm mostly a DBA and .NET developer but I'm learning as much as I can (and loving it) with JQuery.  I have a question and hopefully it's clear and someone can help.

I have created a custom Theme and downloaded the UI and am using it in a project.  I used the "Start" theme and made a few color changes.

The menu functionality is great and easy to use but what I'd like to do, as you see it commonly done, is change the default color state of any given menu item manually per page. So in words, the menu selection will be a different color (defaule state/scheme) if you are ON that page as shown in the menu.

For example, say my colors are:

Widget Default - Blue
Hover - Green
Active - Purple

 
And my pages are like this:

Home
About Us >> History
About Us >> Team


I would like the Home menu item to be Purple (Active) instead of the default white if the user is on the Home page.

I would like the About menu item Us to be Purple if the user is on EITHER History OR Team page.

<ul id="menu">
<li a href="default.aspx">Home</li>
<li a href="about\history.aspx">History</li>
<li a href="about\team.aspx">History</li>

...etc....

In short, I'm hoping to override a menu item at will to it's "Active" state instead of the default "white" state.

Make sense?  Pointers?  Suggestions?