CSSアクティブなスライドドアのナビゲーションバー

Question

私はタブ上にカーソルを置いたときに変更されてうまく動作するCSSスライドドアのナビゲーションメニューを構築していますが、リンクがアクティブなときにも変更したいのですが、私のCSSで働くための積極的なルールを得ているようです。誰かが解決策への示唆を持っているなら、私はそれを高く評価します！

これは、CSSコードです：、私はjQueryのを使用して、個人的に

3 Ways to Highlight Links to the Current Page with CSS

：ここ

.menu { 
position: absolute; 
float: left; 
color: #1e1e1e; 
width: 1000px; 
font-size:17px; 
margin-left: -35px; 
z-index: 2; 
} 

.menu ul { 
list-style-type: none; 
margin-top: 136px; 
position: absolute; 
color:#1e1e1e; 
margin-left: -5px; 
} 

.menu ul li { 
float: left; 
position: relative; 
padding-right: 0px; 

} 

.menu ul li a { 
text-align: left; 
display:block; 
text-decoration:none; 
color:#1e1e1e; 
text-align: right; 
} 


.menu ul li a:hover { 
color: #ffffff; 
text-decoration: bold; 
} 


.menu ul li ul { 
color: #ffffff; 
text-decoration: bold; 
} 

.menu ul li:hover ul { 
display: block; 
position: absolute; 
margin-top: 8px; 
text-decoration:bold; 
color: #ffffff; 
} 

.menu ul li:hover ul li a { 
display:block; 
background:#000000; 
color:#ffffff; 
width: 100px; 
text-align: left; 
text-decoration:bold; 
} 

.menu ul li:hover ul li a:hover { 
background:#000000; 
color:#fff; 
text-decoration:bold; 

} 

.home span { 
background: transparent url('images/home.gif') no-repeat top left; 
display: block; 
line-height: 42px; 
padding: 7px 0 0px 0px; 
width:110px; 

} 

.home:hover span { 
background: transparent url('images/home.gif') no-repeat top right; 
display: block; 
line-height: 42px; 
padding: 7px 0 0px 0px; 
width:110px; 
} 

.home:active span { 
background: transparent url('images/home.gif') no-repeat top right; 
display: block; 
line-height: 42px; 
padding: 7px 0 0px 0px; 
width:110px; 
} 

.necklaces span { 
background: transparent url('images/necklaces.gif') no-repeat top left; 
display: block; 
line-height: 42px; 
padding: 7px 0 5px 0px; 
width:142px; 

} 

.necklaces:hover span { 
background: transparent url('images/necklaces.gif') no-repeat top right; 
display: block; 
line-height: 42px; 
padding: 7px 0 5px 0px; 
width:142px; 
} 

.necklaces:active span { 
background: transparent url('images/necklaces.gif') no-repeat top right; 
display: block; 
line-height: 42px; 
padding: 7px 0 5px 0px; 
width:142px; 
} 

<!--.....................................--> 

<!--This is the HTML code --> 


<div class="menu" float="left"> 
<ul> 


<li class="home"> 
<a href="http://html-link"><span>.</span></a> 
</li> 


<li class="necklaces"> 
<a href="http://html-link"><span>.</span></a> 
</li> 


</ul></div>`} 

Answer 1

は、アクティブリンクを強調するために3つの方法ソリューションを示し記事へのリンクありアクティブなリンクを強調表示します。

これは、問題の解決に役立ちます。