活动菜单CSS不工作

Question

CSS

#menu2 
{ 
background: black; 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 
width: 220px; 
} 
#menu2 li 
{ 
margin: 0; 
padding: 0; 
} 
#menu2 a 
{ 
border-bottom: 1px solid #393939; 
color: #ccc; 
display: block; 
margin: 0; 
padding: 9px 16px; 
text-decoration: none; 
} 

#menu2 a:hover 
{ 
background: black url("../images/select.png") left center no-repeat; 
color: #fff; 
padding: 9px 16px; 
} 

#menu2 a:active 
{ 
background: red; 
color: #fff; 
padding: 9px 16px; 
} 

JQuery的

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#menu2 li a").click(function() { 
      $(".active").removeClass("active"); 
      $(this).addClass('active'); 
     }); 
    }); 
</script> 

HTML

 <ul id="menu2"> 
      <li><a href="Clientlist.aspx">Home</a></li> 
      <li><a href="company.aspx">About us</a></li> 
      <li><a href="CreateInvoice.aspx">Contacts</a></li> 
     </ul> 

Answer 1

替换此#menu2 a:active这个#menu2 a.active

由于这样

替换此

#menu2 a:active 
{ 
background: red; 
color: #fff; 
padding: 9px 16px; 
} 

这个

#menu2 a.active 
{ 
background: red; 
color: #fff; 
padding: 9px 16px; 
} 

Demo

Active Navi More info