Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Tab Active Problem

I am confused. Help would help



9:07 pm on May 25, 2009 (gmt 0)

5+ Year Member

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.


<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.tabs {
list-style-type: none;
padding: 0;
margin: 1%;
line-height: 20px;
margin-left: 1%;

ul.tabs li {
float: left;
padding: 3px;
margin: 0.5%;
line-height: 20px;


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

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

ul.tabs li a:active{



1:41 am on May 26, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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


12:04 am on May 27, 2009 (gmt 0)

5+ Year Member

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?


Featured Threads

Hot Threads This Week

Hot Threads This Month