CSS Active для раздвижных дверей nav bar

Question

Я строил меню навигации для раздвижных дверей CSS, которое меняет и отлично работает, когда я наводил курсор на вкладки, но я также хочу, чтобы он менялся, когда ссылки активны, но я могу " t похоже, чтобы активные правила работали в моем 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, для выделения активной ссылки.

Надеюсь, это поможет вам решить вашу проблему.