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