CSS Forum

**aka.snowball** · 11:15 AM

Hi I have the following css drop down menu.

Code:

.menu{
    padding: 0 0 0 32px;
    margin: 0;
    list-style: none;
    height: 40px;
    background: #fff url(../images/button1a.gif) repeat-x;
    position: relative;
    font-family: arial, verdana, sans-serif;
}
.menu li.top {
    display: block;
    float: left;
    position: relative;
}
.menu li a.top_link {
    display: block;
    float: left;
    height: 40px;
    line-height: 33px;
    color: #bbb;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 0 12px;
    cursor: pointer;
}

.menu li a.top_link span {
    float: left;
    font-weight: bold;
    display: block;
    padding: 0 24px 0 12px;
    height: 40px;
}
.menu li a.top_link span.down {
    float: left;
    display: block;
    padding: 0 24px 0 12px;
    height: 40px;
    background: url(../images/down.gif) no-repeat right top;
}

.menu li a.top_link:hover span {
    background: url(../images/button4.gif) no-repeat right top;
}


.menu ul, .menu :hover ul ul{
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu :hover ul.sub {
    left: 2px;
    top: 40px;
    right: 2px;
    background: #ffffff;
    padding: 3px 0;
    border: 1px solid #999999;
    white-space: nowrap;
    width: 200px;
    height: auto;
}


.sub li a:link {
    color: black;
}

.menu :hover ul.sub li a {
    font-weight: normal;
    display: block;
    font-size: 11px;
    height: 20px;
    width: 192px;
    line-height: 20px;
    text-indent: 5px;
    color: black;
    text-decoration: none;
    border: 3px solid #fff;
    border-width: 0 0 0 3px;
}

.menu :hover ul.sub li a:hover {
    background: #999999;
    color: #fff;
}

Now to my problem, if I do the following: add this row to the bottom of the css menu it works

fine and all visited links turn white.

Code:

/*This work*/
ul.dropdown a:visited { color: #fff; text-decoration: none; }

And what I want to do is to make this work for active links only, so my quastion is why don't

the following work, ie, the active links don't turn white, why, are there no active links?

Code:

/*The following don't work*/
ul.menu a:active { color: #fff; text-decoration: underline; }

You can see the menu here http://www.tdsoft.se

**LadynRed** · 07-22-2010, 08:27 PM

You have 3 different classes there.. so it's no wonder it doesn't work.
The ul either has a class of "dropdown" or it has a class of "menu" - so which is it? They HAVE to be the same if you're talking about the same menu's links.

**aka.snowball** · 07-23-2010, 03:27 AM

Wow, I didn't read my post so well, srry for that.

What I meant was that this work

Code:

ul.menu a:visited { color: #fff; text-decoration: none; }

and this don't, and why?

Code:

ul.menu a:active { color: #fff; text-decoration: underline; }

**aka.snowball** · 07-23-2010, 07:06 AM

Solved my problem, but now another accurs, take a look at the http://www.tdsoft.se again.

The top link is now messed up, just because I add another class to it.

When I click on a link I change its classes from

class="top_link top_link_unSelected"

to

class="top_link top_link_selected"

but now the buttons pile above each other. Anyone know the reason?

added this to javascript and works

Code:

function handleLinkNavigation(menuId,linkId){
var selectedLink ="top_link" + " " + "top_link_selected"; 
var unSelectedLink ="top_link" + " " + "top_link_unSelected";
document.getElementById('ts-colhead-name').innerHTML = selectedLink;
 
menuNavigation(menuId,linkId, unSelectedLink,selectedLink);
}


function menuNavigation(menuId,whereToSearchId, classToFind,classToReplace) {
    
    var allSelectedLinks=document.getElementById(menuId).getElementsByTagName("*");
    //Cycle through the tags using a for loop
    for (i=0; i<allSelectedLinks.length; i++) {
        allSelectedLinks[i].className = classToFind;
    }
    var currentLink = document.getElementById(whereToSearchId).getElementsByTagName("*");
    
    for (i=0; i<currentLink.length; i++) {
    //Pick out the tags with our class name
        currentLink[i].className = classToReplace;
    }
}

Its just when I change the class from

class="top_link top_link_unSelected"

to

class="top_link top_link_selected" (note that there are 2 classes, the top_link class always occurs in both cases, it is the "top_link_unSelected" and the "top_link_selected" that messes things up.

perhaps I can solve this in another way?

that problem occurs, and has to do with my css, but don't know how do fix it.

**Kelpie** · 07-27-2010, 06:32 AM

Only messes up in internet explorer.
This problem has already been answered here by LadynRed