活动菜单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