Active Navbar Link

Question

I have the normal link state and hover state working within my website, but for some reason the active state will not work, why does this not work. Can someone help. I want the active state to keep that link from not changing back to its original colour.

         ul#menu li a {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #223e99 ;
        border-left:solid;
        border-left-color: #223e99 ;
        border-right:solid;
        border-right-color: #223e99 ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#223e99 ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#223e99 ;
        border-bottom-width:15px;
        margin-left:-18px;


    }

    ul#menu li a:hover {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }


    ul#menu li a:active{
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }

Answer 1

The active state might be a bit different then you think. A link/button or element is active the moment you click on it. And it loses it's active state when you release the mouse button.

What I believe you are looking for is either the :visited pseudo-class, which marks a link you have visited in the past (and of which the browser can still remember it ;)), or you're looking for a custom .active class (just create your own css class name) which designates/highlights the page your user is currently visiting.

EDIT A bit of code to demonstrate.

Let's assume you have a menu with top navigation links pointed towards your homepage, news section, about and contact page:

<ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

Initially they all look the same. If you hover over them, they look a bit differently (you've achieved that already with your own css).

Now let's assume your visitor is currently visiting the about page and you want to highlight that in the menu. In that case, you'll just add a class to the specific <li>, and add some styles to your stylesheet:

<ul id="menu">
    ...
    <li class="active"><a href="/about"></a></li> <!-- Note the 'class="active"' in the <li> element
    ...
</ul>

ul#menu li.active a { color: red; }

In the example above, the About link will be in a red font color. Apply the styles to your needs. And don't hold back! As your css styles are cascading (what's in a name...) you can override every single property you'd like.

Answer 2

Try these

give css by hierarchy like these :

.main_class .2class ul#menu li a { /* your css here */ }

or

#main_class #2_class ul#menu li a { /* your css here */ }

example:

.container .site_content ul#menu li a {
    /* your css */
}

.container .site_content ul#menu li a:hover {
    /* your css */
}

.container .site_content ul#menu li a:active {
    /* your css */
}

Answer 3

You need to be aware of the difference between :active and :visited.

:active is shown while you click the link and only when you click, while :visited is shown on links you have already seen.

---

On a completely different note, you should clean up the CSS. You have a lot of repetition going on. Once you have declared stuff like font-family and font-size in ul#menu li a, you don't need to repeat them in ul#menu li a:hover, ul#menu li a:active and ul#menu li a:visited unless they change.

I took the liberty of updating your CSS to show you:

ul#menu li a {
    text-decoration: none;
    font-family: 'Novecento Sans W01 Lt';
    font-size: 14px;
    color: white;
    background-color: #223e99 ;
    border-left: solid;
    border-left-color: #223e99 ;
    border-right: solid;
    border-right-color: #223e99 ;
    border-left-width: 32px;
    border-right-width: 32px;
    border-top: solid;
    border-top-color: #223e99 ;
    border-top-width: 15px;
    border-bottom: solid;
    border-bottom-color: #223e99 ;
    border-bottom-width: 15px;
    margin-left: -18px;
}

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, {
    background-color: #7fc14b ;
    border-left-color: #7fc14b ;
    border-right-color: #7fc14b ;
    border-top-color: #7fc14b ;
    border-bottom-color: #7fc14b ;
}

And if you want to make it a little easier to read, you can use the short-hand declarations, like so:

ul#menu li a {
    text-decoration: none;
    font-family: 'Novecento Sans W01 Lt';
    font-size: 14px;
    color: white;
    background-color: #223e99;
    border: 32px solid #223e99;
    border-top-width: 15px;
    border-bottom-width: 15px;
    margin-left: -18px;
}

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, {
    background-color: #7fc14b ;
    border-color: #7fc14b ;
}

You can read more about border short-hand at CSS Schools