[thelist] css active state

[thelist at punterspower.co.uk]

Hi All I have been looking at different css code that producing the hover
and onstate effects, this as has been discussed before utilising the UL
and LI tags

Looking at the list apart site I thought this would be the easiest way
forward, however... it isn';t working, that is the on sate isn't doing
iots job :(

Amyone care to share the ways of the wise?

here is the code



css begin

#menu {
	margin: 0;
	padding: 0;
	}

#menu ul {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
	}

#menu ul li {
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
	}

#menu ul li a {
	background: #fff;
	width: 118px;
	height: 2em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: none;
	padding: 0;
	margin: 0 0 10px 0;
	color: #c30;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 2em;
	font-size:    xx-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size:    x-small;
	}

html>#menu ul li a  {
	font-size: x-small;
	}

#menu ul li#five a	{
	width: 119px;
	}

#resources a:link, #resources a:visited {
	border-right: 1px solid #ccc;
	}

#menu ul li a:hover {
	color: #000;
	background: #ccc;
	}

#menu a:active	{
	background: #c60;
	color: #fff;
	}

css end



<div id="menu">

<ul>
<li id="one"><a href="/" title="one">one</a></li>
<li id="two"><a href="/two/" title="two">two</a></li>
<li id="three"><a href="/three/" title="three">three</a></li>
<li id="four"><a href="/four/" title="four">four</a></li>
<li id="five"><a href="/five/" title="five">five</a></li>
</ul>
</div>

Thanks
Andrew
--