CSS主動移門導航欄

Question

我一直在建立一個CSS滑動門導航菜單，當我將鼠標懸停在標籤上時，它會發生變化並且效果很好，但是當鏈接處於活動狀態時，我也希望它改變，但是我可以'似乎得到了活躍的規則在我的CSS中工作。如果有人對解決方案有任何建議，我將不勝感激！

這是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種方式解決突出活動鏈接的文章的鏈接：

3 Ways to Highlight Links to the Current Page with CSS

就個人而言，我使用jQuery，突出顯示活動鏈接。

希望這可以幫助您解決您的問題。