Grow your CSS skills. Land your dream job.

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 …
    css…
    #menu li a:hover {
    color: #B5D5FF;
    background: #FFF;
    font-family:arial;
    }

    #menu li a:active {
    color:#AB5667;
    font-family:arial;
    }

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

    html…
    <div id="menu">
    <ul>
    <li></li>
    <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>
    </ul>
    </div>

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

    # 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:

    Code:
    #menu li a#current {
    color:#AB5667;
    font-family:arial;
    }
    # 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.

*May or may not contain any actual "CSS" or "Tricks".