ロールオーバーと選択したエフェクトを使用したCSSナビゲーションメニュー。 「選択済み」を適用するにはどうすればよいですか？

Question

私はHTMLや多くのコーディングを知らない。以下は、私が作成しなかったコピーと貼り付けです。基本的には、3つの異なるメニューセクション（ホーム、ブログ、連絡先）と、メニューが含まれる4つの異なる状態：ノーマル、ホバー、クリック、アクティブの3つの状態を含む単一のイメージがあります。

選択/アクティブは、ホームページでのみ動作しています。アクティブな画像を他のページに関連付けられた他の画像に貼り付けるにはどうすればよいですか？

P.S.私は何かについては何も知らないので、正確なコードを使うべきか（以下の正確なコーディングが与えられているか）、どこに置くべきかについて私に一歩一歩伝えることができれば、最も役に立ちます。

CSSコード：

#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; 
    } 

本部のメニューコード：

<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

あなたは、個々のHTMLページで作業している場合は、それぞれのメニュー項目が選択されているために作るためにそれぞれ1を編集してください/アクティブなクラス。

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> 

のように...