Help with hover in the CSS Joomla

Hi

I need help with a hover fucntion is the CSS of my joomla site. Basically the hover on and off switch works for only 2 of my top menu tabs. I have no idea why it works for only 2 and not the rest.

Please have a look at www.onlinecasinowoman.com and see when you click on the tabs it is suppose to be a light pink when that tab is selected this works for 2 of the tabs but not the rest :/

Here is the CSS code and if someone could explain this to me that would really help me out. Or see what i can change in the CSS to make this work for all tabs.

Thanks

/* begin MenuItem */
.art-menu ul li
{
clear: both;
}

.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 29px;
cursor: pointer;
text-decoration: none;
margin-right: 2px;
margin-left: 2px;
}


.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 87px;
background-image: url('../images/MenuItem.png');
}

.art-menu a .l
{
left:0;
right:4px;
}

.art-menu a .r
{
width:408px;
right:0;
clip: rect(auto, auto, auto, 404px);
}

.art-menu a .t
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
padding: 0 19px;
margin: 0 4px;
line-height: 29px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top:-29px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-29px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-29px;
}
.art-menu a:hover .t
{
color: #E2ECF3;
}

.art-menu li:hover a .t
{
color: #E2ECF3;
}

.art-menu li:hover>a .t
{
color: #E2ECF3;
}


.art-menu a.active .l, .art-menu a.active .r
{
top: -58px;
}

.art-menu a.active .t
{
color: #070E12;
}


/* end MenuItem */

 

Ok. I got the issue over here.
you need to apply class="active" to <a> tag when you are on that page.

You did it for first 2 pages but for rest of the page, it's not there. so do it and it will fix your problem.

Hope it helps...

 

Hi

I am not understanding what you mean here?

Maybe I am putting it in the wrong place but I still can't seem to get it.

i can see how one is active but I am not sure where I am suppose to put the others?

 

Hi friend inset this code on your template.css file

a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }

thank you

 

Hi

a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }

This would work if it wasnt an image.

It has something to do with the active but i have no idea how that works

Thanks for you help seems that I am still working on it