CSS navigation menu with rollover and selected effects. How do I apply the “selected”?

Question

I don't know HTML or much coding. Below is a copy and paste, something I didn't create. Basically we have a single image containing three different menu sections (home, blog, contact) and the four different states that the menu could be in: normal, hover, clicked and active.

The selected/active, is only working on the home page. How do I make the active image stick to the other images associated with the other pages?

PS I don't know anything about anything, so it would be most helpful if you can give me a step by step on what the exact code should be used (given the exact coding below) and where to place it.

CSS Codes:

#ul.cssmenu a { background:url(header-icon-strip.png); }
  .ul.cssmenu {
    list-style: none;
    padding: 0px;
    }



.displace {
    position: absolute;
    left: -5000px;
    }

ul.cssmenu li {
    float: left;
    }

ul.cssmenu li a {
    display: block;
    width: 120px;
    height: 25px;
    background: url('http://www.webvamp.co.uk/uploads//2009/03/sprite.gif');
    }

/*
*   Normal Links
*/
ul.cssmenu li.home a {
    background-position: 0 0;
    }

ul.cssmenu li.blog a {
    background-position: -150px 0;
    }

ul.cssmenu li.contact a {
    background-position: -300px 0;
    }

/*
*   Hover Links
*/
ul.cssmenu li.home a:hover {
    background-position: 0 -44px;
    }

ul.cssmenu li.blog a:hover {
    background-position: -150px -44px;
    }

ul.cssmenu li.contact a:hover {
    background-position: -300px -44px;
    }

/*
*   Clicked Links
*/
ul.cssmenu li.home a:active {
    background-position: 0 -88px;
    }

ul.cssmenu li.blog a:active {
    background-position: -150px -88px;
    }

ul.cssmenu li.contact a:active {
    background-position: -300px -88px;
    }

/*

*   Selected/Active Links
*/
ul.cssmenu li.home a.selected {
    background-position: 0 -132px;
    }

ul.cssmenu li.blog a.selected {
    background-position: -150px -132px;
    }

ul.cssmenu li.contact a.selected {
    background-position: -300px -132px;
    }

Div menu code:

<ul class="cssmenu">

<li class="home"><a href="http://example.com/" class="selected" title="Home"><span class="displace">Home</span></a></li>

<li class="blog"><a href="http://example.com/blog.html/"  title="Blog"><span class="displace">Blog</span></a></li>

<li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>

</ul>

Answer 1

If you are working with individual HTML pages, you should edit each one to make the respective menu item to have the selected/active class.

home.html

<ul class="cssmenu">
  <li class="home"><a href="http://example.com/" class="selected" title="Home"><span class="displace">Home</span></a></li>
  <li class="blog"><a href="http://example.com/blog.html/"  title="Blog"><span class="displace">Blog</span></a></li>
  <li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

blog.html

<ul class="cssmenu">
  <li class="home"><a href="http://example.com/" title="Home"><span class="displace">Home</span></a></li>
  <li class="blog"><a href="http://example.com/blog.html/" class="selected" title="Blog"><span class="displace">Blog</span></a></li>
  <li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

and so on...