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:
HTML Code:
<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
Code:
.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?
Bookmarks