Why is my nav ul li:active background color not working?

Question

In my navigation I want to be able to and click on a navigation link and have the li item change color when you go the page. Eg. I click on the about us tab in the navigation, it goes to the about us page and the about us page tab in the navigation bar has changed color. I tried nav ul li:active but it is not working.

Here is the css:

#nav {

    display: block;

    position:relative;

    border: 1px solid #002799;

    background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    padding: 0px 0px 0px 0px;

    border-radius: 15px;

    height: 40px;

    width: 470px;

    margin: 0px auto;

    font: Bold 16px Verdana;


}

#nav ul {

    margin: 0px;

    padding: 0px;

    min-width:250%;


}


#nav li {

    list-style: none;

    float: left;

    position: relative;

    display:inline;

    width:auto;
}




#nav ul li {

    list-style: none;

    float: left;

    position: relative;

}

#nav ul li:last-child a {

    border:none;

}

#nav ul li:hover {

    background: #060652;

}

#nav ul li:active {

    background: #060652;

}

#nav ul li:hover ul {

    display:block;

    width:100%;
}

#nav ul ul {

    display: none;

    position:absolute;

    left:0px;

    min-width:250%;

    z-index: 999;

    background-color: #4970E3;

}

#nav ul ul li {

    border: 1px solid #FFFFFF;

    display:block;

    float: none;


    z-index: 999;

    width: auto;

}

#nav ul ul li a {

    border-right: none;

    font: Bold 16px Verdana;

    width: auto;

}

#nav ul li a {

    text-decoration: none;

    display: block;

    border-right: 1px solid #121B3E;

    padding: 10px 15px;

    color: #fbfbfb !important; 
}

Here is the html:

<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a>
</li>

<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a>What We Do</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault & OSclass</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>
</li>
</ul>
</div>

Answer 1

To extend on what @Aister posted I would not use echo on the html but

<li>
   <a>What We Do</a>
   <ul>
   <?php
     $menu1 = array ( 41,43,45,47,49,52,54,62,56 );
         foreach ($menu1 as $menu_item) {
   ?>
       <li>
           <a <?= ($_GET['page_id'] == $menu_item)? 'class="active" ' : '';?> href="http://osweb01.ostech.com.au/?page_id=<?=$menu_item?>">OSbill & OScal</a>
       </li>
   <?php
       } 
   ?>
   </ul>
</li>

The main advantage in this approach is that your templates will be a lot easier to read in your editor because the html syntax highlighting will recognize the HTML and not just see a string.

One caveat to my approach is that you need to have the php ini configured to allow short tags or it will break. If it doesn't work and you can't change it replace

<?=

with

<?php echo

Answer 2

If the above doesn't work (which it didn't for me) just apply a different colour to your navigation bar depending on which page you are on.

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li b {
background-color: green;
}

li a:hover {
background-color: red;
color: white;
}

Use code as above? Simple navigation bar with 'active' faked out.

<ul>
<li><b href = "homepage.html">Homepage</a></li>
</ul>

Answer 3

Just as everyone said, you'll need to use a separate class for the a, :active won't work like what you want.

However, if you use the $_GET['page_id'] value you can set the class automatically. Like this:

<li><a <?php if ($_GET['page_id'] == 56) { echo 'class="active" '; } ?>href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>

You can even go an extra mile, and have the page_id stored in an array at the top of the php file. And do a foreach loop and echo out the links as well as class.

<li><a>What We Do</a>
<ul><?php
    $menu1 = array ( 41,43,45,47,49,52,54,62,56 );
    foreach ($menu1 as $menu_item) {
        echo "<li><a ";
        if ($_GET['page_id'] == $menu_item) { echo 'class="active" '; }
        echo 'href="http://osweb01.ostech.com.au/?page_id='.$menu_item.'">OSbill & OScal</a></li>';
    } ?>
</ul>
</li>

Answer 4

You've misunderstood what :active means.

Your web browser has no concept of which li on the page represent the current page, unless you tell it somehow.

The active selector selects the active link. That is, a link you've selected using keyboard navigation (but haven't followed yet) or a link you've just clicked on (before the new page loads). Once the new page loads, none of the links are active again.

So, you can only use :active on a elements, and not for what you're trying to do here.

Instead, you want to add a class to the li for whichever tab represent the current page, and use CSS to style that li appropriately:

<li><a href="...">Why OSTech</a></li>
<li class="current"><a href="...">Testimonials</a></li>
<li><a href="...">Case Study 1</a></li>

with:

li.current {
    background: #060652;
}

Answer 5

:active is only the action when the link is actively pressed, so you can see it clearly if you click on the link and hold down on it, instead of letting go.

In order to do this you will need to assign a class to the a for the page that is open. There are ways to accomplish this with a server-side language so you don't have to do it manually, but if you are making a static .html page, you will need to manually add a class (like class="active") to the a for each page that is "active".

So for example:

menu.html will have <a href="menu.html" class="active">Menu</a> and <a href="about.html">About</a>

Whereas about.html will have <a href="menu.html">Menu</a> and <a href="about.html" class="active">About</a>