'Selecting' buttons on a CSS Navbar using SSI

Question

I'm working on a site and I'm using SSI to attach a banner/menu/footer to each page on my website. The problem I'm having is showing the 'selected' state on the menu for each different page.

Just to avoid confusion, the entire navbar is one image at a fixed height/width and a position that changes to change button state.

What I have so far:

index.html

<!--#include virtual="./global_header.html" -->
<!--#include virtual="./global_footer.html" -->

    /**Yeah, that's it for index.html at the moment. Like I said, a work in progress**/

header.html

<!DOCTYPE...

<div class="s_container" id="s_menu">
    <ul id="navbar">
        <li id="menu_borderl"><p>[</p></li>
        <li id="menu_home"><a href="index.html" title="Home">Home</a></li>
        <li id="menu_forum"><a href="/forum/" title="Forum">Forum</a></li>
        <li id="menu_apply"><a href="apply.html" title="Apply">Apply</a></li>
        <li id="menu_about"><a href="about.html" title="About">About</a></li>
        <li id="menu_borderr"><p>]</p></li>
    </ul>
</div>...

CSS:

ul#navbar {
    width:1000px;
    list-style:none;
    height:76px;
    margin:0px;
    padding:0px;
}

ul#navbar li {
    display:inline;
}

ul#navbar li a {
    height:76px;
    float:left;
    text-indent:-9999px;
}

ul#navbar li p {
    height:76px;
    float:left;
    text-indent:-9999px;
    margin:0px;
}

/**HOME**/
/**I have these once for each button, with the correct x,y for the bg position**/
ul#navbar li#menu_home a {
    width:205px;
    background:url(images/menu_buttons.png) no-repeat -75px 0;
}
ul#navbar  li#menu_home a:hover {
    background-position:-75px -76px; 
}
ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

If I add class="current" to any li it works as intended.

Now for my question, and sorry if it's obvious, but I'm pretty new to this. Is there any way I can place some code in 'index.html' to add the 'current' class to a given line item? Thanks for any help, and sorry if it's terribly obvious. If you need more information, please let me know.

SOLVED

Since I'm new I can't answer my question for another couple of hours, but here's what I'm gonna post:

EDIT

Changed a bit in the code that goes into index.html per leftclickbens suggestion to get rid of !important

So I figured it out. for the example above i removed

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

from the CSS file and added

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

into index.html (between the SSIs)

Answer 1

Changed a bit in the code that goes into index.html per leftclickbens suggestion to get rid of !important

So I figured it out. for the example above i removed

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

from the CSS file and added

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

into index.html (between the SSIs)

Answer 2

If you are using 'static' server side includes, as opposed to a dynamic server-side language like PHP, then your best bet is to look at JavaScript methods of highlighting the current page. There are plenty of plugins available, depending on what framework you are using (e.g. jQuery), or if your requirements are simple you might get by with some simple regular expression matching.