CSS Tab Active Problem

I am confused. Help would help

[seo_design]

Hello All,

I tried many ways to make my tabs active when clicked but it did not work. Can someone help in this? Thanks in advance.

HTML CODE

<ul class="tabs">
<li> <span id="nav"><a href="#">HOME</a></span> </li>
<li> <span id="nav"><a href="#">WEB DESIGN SEO</a></span> </li>
<li> <span id="nav"><a href="#">WEBSITE SEO</a></span></li>
<li> <span id="nav"><a href="#">WORKS</a></span> </li>
<li> <span id="nav"><a href="#">BlOG</a></span> </li>
<li> <span id="nav"><a href="#">CONTACT</a></span> </li>
</ul>

CSS CODE

ul.tabs {
list-style-type: none;
padding: 0;
margin: 1%;
line-height: 20px;
margin-left: 1%;
}

ul.tabs li {
float: left;
padding: 3px;
background-color:#633;
margin: 0.5%;
line-height: 20px;
font-weight:bold;

}

ul.tabs li a {
display: block;
padding: 0px 7px;
color: #fff;
text-decoration: none;
}

ul.tabs li a:hover {
color: #ff0;
background-color:#933300;

}
ul.tabs li a:active{
background-color:#933300;

}

[swa66]

In all likelihood :active works, it's probably just not what you think it is.

[w3.org...] :

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

To have a "selected" tab, you need to:
- either add a class on the selected item and style that one differently
- either add a class (or ID) on each of them , and match up the item with a class or ID on a wrapper like the body (more difficult to get, but once you have it, it' easier as the menu doesn't change from page to page anymore

[seo_design]

Ok. Thanks,

Actually I tried it but it did not affect it.

Do I need put as a part of ul.tabs li selected or just different class?