Help with CSS Links

[wyclef]

Can someone please check the 'About' dropdown how the link turns black but then turns white when you roll off it? I want it to function like the other links except this link is supposed to represent the active page so the off state needs to be white and not the light blue. i'm having a really hard time figuring out the css on this one. best checked in firefox if possible.

[fasterthanlight™]

http://www.kirupa.com/forum/showthread.php?t=299432

[wyclef]

here's a link...

www.dynodealz.com/t/

[fasterthanlight™]

its because you're applying a #FFFFFF to a span (Active state ?)

so when you roll off the About link and go into the drop down menu, the About state changes from :hover (which makes it black) to the "active" state (makes the text white, but since you are within the drop down menu, the white background of the drop down menu + white text from the span makes the text disappear)

There is a better way of structuring your CSS for this, but it requires you to start from scratch

*edit:
you can apply the white text colour as a class, and apply the class to the link for whichever page you are on, then you could do a :hover on your class that forces the active state-hover-state to be black

[wyclef]

i'm open to starting from scratch, just need to know how i might do this differently.

[fasterthanlight™]

OK here's a rough idea:

<ul>
<li><a href="">Some link</a></li>
<li><a href="" class="active_state">Some link</a></li>
<li><a href="">Some link</a></li>
<li><a href="">Some link</a></li>
</ul>




ul li a {
color: #666666;
}

ul li a:hover ul {
display: block; /* this is probably wrong, but this is where you style the drop down menus */
background: url(images, yo!);
}

ul li a.active_state {
color: #FFF;
}

ul li a.active_state:hover {
color: #000;
}

[wyclef]

ok, trying this out...having trouble getting it to work still but will keep trying to implement something like this.

[redelite]

ul li a:hover ul {
display: block; /* this is probably wrong, but this is where you style the drop down menus */
background: url(images, yo!);
}


Faster, does a:hover ul work in all browsers? :look:

[fasterthanlight™]

@Red: hahahah, Nope! but examples aren't intended to be bomb-proof :P

@wyclef, got your PM, post your problems in here and I can help!

[redelite]

@Red: hahahah, Nope! but examples aren't intended to be bomb-proof :P

:lol: Ok good, because for a second there I was going to slap myself for never doing that.. (-: