Navigation menu active page color not behaving as it should

Question

I created an unordered list for the mainnav links. I use the following lines in the code:
<li><a href="../index.html" class="thispage">Home</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Agenda</a></li>
        <li><a href="../Pages/artists.html">Artists</a></li>
The Home button shows the color for 'active', but if I go to the artists page it first shows the hover color, then the page opens but does not show the active color.... I.o.w. the Home button stays on active though it is not active.
Please see the effect on my testsite: www.adrianrooymans.nl

Answer 1

armona22 wrote:
I'm sorry, but I tried that already, and it does not solve the problem. If I do that I get TWO active pages, but clicking anywhere on the artists page makes the blue color go away, except for the Home button.... I could temporarily put that on the testserver so that you could see what happens (unless you beleive me).
You will get two active menu items unless the class is removed from the links that you don't want it on.
If you look at the example page code in the 'completed' folder of the Bayside Beat tutorial you will see on the 'index' page the class has been added to the 'index' link:
<nav id="mainnav">
      <ul>
        <li><a href="index.html" class="thispage">Home</a></li>
        <li><a href="sightseeing.html">Sightseeing</a></li>
        <li><a href="#">Eating Out</a></li>
        <li><a href="#">What's On</a></li>
        <li><a href="#">Where to Stay</a></li>
      </ul>
    </nav>
Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:
<nav id="mainnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>
            <li><a href="#">Eating Out</a></li>
            <li><a href="#">What's On</a></li>
            <li><a href="#">Where to Stay</a></li>
        </ul>
    </nav>