Lo tienes en el enlace que has puesto tu mismo, puede ser que hayas copiado el CSS STEP 1 en vez de STEP 4 que es el que mas te interesa?
EL CSS
Cita: /* adding the active/focus state */
#navlist_d {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#navlist_d li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#navlist_d a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#navlist_d a em {
display:block;
font-style:normal;
width:7em;
height:1.5em;
color:#000;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#navlist_d a:hover {
color:#c00;
}
#navlist_d a:hover em {
border-bottom:0.5em solid #c00;
}
#navlist_d a:active, #navlist_d a:focus {
width:0;
height:0;
outline:0; /* for browsers that understand */
}
#navlist_d a:active em, #navlist_d a:focus em {
/* change the em bottom border and text to blue on
active/focus thus giving a suitable alternative to
the dotted border */
border-bottom:0.5em solid #00c;
color:#00c;
outline:0; /* for browsers that understand */
}
XHTML
Cita: <ul id="navlist">
<li><a href="#nogo"><em>Item one</em></a></li>
<li><a href="#nogo"><em>Item two</em></a></li>
<li><a href="#nogo"><em>Item three</em></a></li>
<li><a href="#nogo"><em>Item four</em></a></li>
<li><a href="#nogo"><em>Item five</em></a></li>
</ul>
Saludos, J@se