The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

active / current menu

  • # February 26, 2009 at 7:52 am

    Does anyone know how I can add an active status to a menu, I’ve put …
    #menu li a:hover {
    color: #B5D5FF;
    background: #FFF;

    #menu li a:active {

    #menu li a:visited {
    background-color : #fff

    <div id="menu">
    <li><a href="gettingready.htm" target="_self">Getting ready </a></li>
    <li><a href="gettingready2.htm" target="_self">2 </a></li>
    <li><a href="happycouple.htm" target="_self">The happy couple </a></li>
    <li><a href="happycouple2.htm" target="_self">2 </a></li>
    <li id="active"><a href="ceremony.htm" target="_self" id="current">Ceremony</a></li>
    <li><a href="ceremony2.htm" target="_self">2 </a></li>
    <li><a href="celebrations.htm" target="_self">Celebrations <span></span> </a></li>
    <li><a href="celebrations2.htm" target="_self">2 </a></li>

    The hover and visited both work fine but the active doesn’t work, only when I hold down on the link, any ideas anyone?

    # February 26, 2009 at 9:27 am

    a:active (with a colon) is a pseudo-selector that indicates the link is currently being clicked on or has been "tabbed" to. In your code, your link item has a ID of current, so use that:

    #menu li a#current {
    # February 26, 2009 at 11:48 am

    Yeah I just figured it out, cheers!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed