Highlighting active tab in navigation

Problem

I am trying to highlight the active tab in my tabbed navigation site. This is html snippet for tabs.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title here</title>
<link href="style.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
        font-size: medium;
}
</style>
</head>

<body>

<div id="container">
     <div id="navigation">                    
        <ul>
           <li class="link"><a href="default.html" title="Product">Home</a></li>
           <li class="link"><a href="Research.html" title="Product">Research</a></li>    
           <li class="link"><a href="Teaching.html" title="Progress">Teaching</a></li>
           <li class="link"><a href="about.html" title="About">Contact</a></li>
           <li class="link"><a href="CV.html" title="CV">CV</a></li>
        </ul>
     </div>

This is my Stylesheet

/* --------------------------------------------- RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; font-weight: normal;}
body { margin: 0pt;}
ol, ul { list-style-type: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/* --------------------------------------------- STRUCTURE STYLES */
body {
        font-family: Georgia, "Times New Roman", Times, serif;
        background: url('bg.jpg') repeat-x top left #f0f0f0;
}

#container {
        width: 960px;
        height: auto;
        margin: 0 auto 0 auto;
}

#header {
        color: #fff;
        font-size: .9em;
        width: 190px;
        height: 40px;
        float: left;
        margin-right: 2px;
}


   /* --------------------------------------------- NAVIGATION */
#navigation {
        padding-top: 15px;
        width: 960px;
        float: left;
}

#navigation .link {
        background: #f0f0f0;
        float: left;
        text-align:center;
        font-size:0.5cm
  }

#navigation .link:hover {
        background: #92c19b;
}

#navigation .link:focus{
        background:silver;      
  }
#navigation .link:active{ 
background:silver; 
} 

#navigation li a {
        padding-top: 15px;
        padding-left: 15px;
        width: 176px;
        height: 45px;
        margin-bottom: 1px;
        border-left: #fff solid 1px;
        color: #000;
        float: left;
        font-size: 1em;
}

#navigation p {
        position: absolute;
        font-size: .8em;
        top: 45px;
        padding-left: 15px;
}

/* --------------------------------------------- FONTS & IMAGES */
h1 {font-size: 1.9em;}
#header h1 {padding: 15px; background: #000; text-align: center; font-weight: bold;}
#header a {color: #fff;}
h2 {font-size: 1.9em;}
#splash h2 {color: #12884f;}
h3 {font-size: 1.4em; line-height: 1.1em;}
h4 {font-size: 1em; font-weight: bold;}
p {font-size: .8em; line-height: 1.6em;}
p.footer {font-size: .6em; color: #000; text-align: right; padding-top: 100px;}
p.header {font-size: .8em; font-style: italic; color: #ababab;}
#content p, #content h3, #sidebar h3, #content h4, #sidebar p {margin-bottom: 25px;}
img {margin: 0 0 25px 0;}
li {font-size: .7em; margin-bottom: 10px;}

both li:active and li:focus don't highlight the active tab. But strangely li:hover does work

Anything i can do to resolve this??

I am looking for highlighting something like this:

enter image description here

Problem courtesy of: raghu_3

Solution

Sorry my mistake, just remove the last comma "," before the opening the curly brackets "{" and it should work. Here's an example I just tested:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <style>
            #home #nav_home a,
            #research #nav_research a,
            #teaching #nav_teaching a,
            #about #nav_about a,
            #cv #nav_cv a {
                color:aqua;
            }
        </style>
    </head>
    <body id="research">
        <ul>
            <li id="nav_home"><a href="">Home</a></li>
            <li id="nav_research"><a href="">Research</a></li>
            <li id="nav_teaching"><a href="">Teaching</a></li>
            <li id="nav_about"><a href="">About</a></li>
            <li id="nav_cv"><a href="">CV</a></li>
        </ul>
    </body>
</html>

I hope this helps :) Sorry about the wrong answer before, as I said I'm just starting web development myself.

Cheers!

Solution courtesy of: Dasuevia

Discussion

The CSS :active selector only applies when the link is active - i.e. being clicked on. The :focus selector is only allowed on elements that accept keyboard events or other user input. I'm fairly new to web development myself, but I think you won't be able to achieve what you're looking for with those selectors.

You could try assigning an id to the body tag for each page in your tab menu and a different id to every li in your menu. For example:

<body id="home">        <!-- on default.html -->
<body id="research">    <!-- on research.html -->
<body id="teaching">    <!-- on teaching.html -->
<body id="contact">     <!-- on about.html -->
<body id="cv">          <!-- on cv.html -->

Your menu could look something like this:

<ul>
    <li class="link" id="nav_home"><a href="default.html" title="Product">Home</a></li>
    <li class="link" id="nav_research"><a href="Research.html" title="Product">Research</a></li>
    <li class="link" id="nav_teaching"><a href="Teaching.html" title="Progress">Teaching</a></li>
    <li class="link" id="nav_contact"><a href="about.html" title="About">Contact</a></li>
    <li class="link" id="nav_cv"><a href="CV.html" title="CV">CV</a></li>
</ul>

Then on your CSS you could do something like this:

#home #nav_home a,
#research #nav_research a,
#teaching #nav_teaching a,
#contact #nav_contact a,
#cv #nav_cv a, {
    background:silver;
}

Another option would be to just create a new class (e.g. class="active_link") and associated style for the active tab and then set it manually per page.

As I said I'm fairly new to web development myself, but both solutions should work. If you're looking for something more dynamic you probably need some Javascript.

I hope this helps.

Cheers,

Discussion courtesy of: Dasuevia

This recipe can be found in it's original form on Stack Over Flow.