@michael Actually, Google is how I came across this thread. I was experiencing a 'flakey' problem with a menu I was working on, and searched Google to see if I could find something where someone else had a similar problem.

After viewing a couple of the results, I just went back to one of my prior projects, to see what I had done differently there. I suppose I should have just done that first, but I was thinking that what I was doing on the current project WAS the same as I did before, but that I was just missing something. Anyway... bottom line, turns out I wasn't doing it exactly as I had before, and by duplicating my original code, resolved the problem...so.. I posted the code here.

I do know exactly what you mean though about people not taking the time to researching on their own, before they post questions on forums. Many times the answer is all over the place on the net. Just Google It! ha

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

@michael I'm sure the original person who posted found a solution a long time ago. I added this solution for other's who may be searching today. I often find answers to problems in forums where the thread was started years prior. Just putting in my two cents! :)

There's a fairly simple solution to this. Assign an id to your list items in your html on each page, and then just ad one entry to your css as follows. The example below changes the Home page link color from off-white to gray. (also underlines on hover)

<div id="nav-bar">
    <ul>
      <li id="selected"><a href="index.html">Home</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
</div>

#nav-bar ul {
    float : left;
    list-style : none;
    margin : 0;
    padding : 0;
}

#nav-bar ul li {
    display : inline;
}

#nav-bar ul li a {
    display: inline;
    float : left;
    padding : 0 10px;
    color : #EDEDED;
    text-decoration : none;
}

#nav-bar ul li a:hover {
    color : #AAAAAA;
}

#nav-bar ul li#selected a {   /* this changes color of the menu item of current page */
    color : #AAAAAA;
}