CSS Spotlight Menu

[Pengman]

I'm trying to adapt the CSS Spotlight menu so that the spotlight is 'always on' for the link of the currently selected page. So I've amended the HTML to provide for an id selector of "current" as follows:


<div class="spotlightmenu">
<ul>
<li id="current"><a href="/danband/home.html"><span>Home</span></a></li>
<li><a href="/danband/band.html"><span>The Band</span></a></li>
<li><a href="/danband/gigs.html"><span>Gigs</span></a></li>
<li><a href="/danband/fans.html"><span>Fans</span></a></li>
<li><a href="/danband/stuff.html"><span>Stuff</span></a></li>
<li><a href="/danband/contact.html"><span>Contact</span></a></li>
</ul>
</div>


And I've added this to the CSS


.spotlightmenu #current { /*currently selected tab*/
background: white; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
color: black; /* why doesn't this work? */
}

Whilst the spotlight is now 'always on' for the currently selected tab, the text is dispayed white (as per the rest of the CSS table) as per the rest of the CSS, and not black as per the amended css above (i.e. it's white text under a white spotlight and therefore invisible)

My CSS isn't exactly brilliant - any suggestions please?

[Beverleyh]

Without seeing the rest of the code, I'd suggest targetting the anchor text specifically - so something like ;

.spotlightmenu #current a {
color: black;
}
If you need more help, please provide a link to your page and to the spotlight menu demo.

[Pengman]

That worked perfectly Beverleyh. Many thanks!