# Help with CSS Links

**URL:** <https://forum.kirupa.com/t/help-with-css-links/262138>\
**Category:** web dev\
**Created:** [June 3, 2008, 5:38pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138 "2008-06-03T17:38:22Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)\
**Post date:** [June 3, 2008, 5:38pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/1 "2008-06-03T17:38:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 3, 2008, 5:44pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/2 "2008-06-03T17:44:31Z")

</div>

> **[\[Read Before Posting!!\] Asking Questions / Posting Problems Etiquette](https://www.kirupa.com/forum/showthread.php?t=299432)**
>
> Got a web design/development question or just want to hang out with the most awesome people on the planet? Drop on in!

---

<div class="post-metadata">

**Author:** ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)\
**Post date:** [June 3, 2008, 5:48pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/3 "2008-06-03T17:48:39Z")

</div>

here’s a link…

[www.dynodealz.com/t/](http://www.dynodealz.com/t/)

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 3, 2008, 5:50pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/4 "2008-06-03T17:50:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)\
**Post date:** [June 3, 2008, 5:53pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/5 "2008-06-03T17:53:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 3, 2008, 5:58pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/6 "2008-06-03T17:58:48Z")

</div>

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\>

```auto

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;
}

```

---

<div class="post-metadata">

**Author:** ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)\
**Post date:** [June 3, 2008, 6:05pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/7 "2008-06-03T18:05:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 3, 2008, 6:45pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/8 "2008-06-03T18:45:28Z")

</div>

```auto

ul li [COLOR="Red"]a:hover ul[/COLOR] {
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:

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 3, 2008, 6:46pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/9 "2008-06-03T18:46:45Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 3, 2008, 6:48pm UTC](https://forum.kirupa.com/t/help-with-css-links/262138/10 "2008-06-03T18:48:49Z")

</div>

> [@fasterthanlight™;2335797](#):
>
> @Red: hahahah, Nope! but examples aren’t intended to be bomb-proof 😛

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