Dotted border appears on navigation button after it's clicked

Question

http://garygee.com/firm.html - the link to page where dotted line appears after its clicked
css code:
@charset "utf-8";
/* CSS Document */
#nav {
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 375px;
    left: 210px;
    top: 30px;
    background: #333;
#nav ul {
    margin:0;
    padding: 0;
    list-style: none;
    height: 1.2em;
    border-bottom: solid 1px #999;
#nav ul li {
    float: left;
    padding-right: 0px;
    font: .85em/1.5em Arial, Helvetica, sans-serif;
    text-align: left;
#nav ul li a {
    padding: 10px 20px 10px 20px;
#nav ul a:link, #nav ul a:visited {
    color: #FFF;
    text-decoration: none;
#nav ul a:hover, #nav ul a:active {
    color: #999;
    text-decoration: none;
#nav ul a.current, #nav ul a.current:hover, #nav ul a.current:active {
    color: #F90;
how do I makes this go away - your help is much appreciated
Thanks

Answer 1

As Ned said, you can remove the outline with CSS but it's a web accessibility feature. If you click somewhere else on the page the outline will go away.
The Active Link's Focus state had a dotted border or outline to show people where they are on the page.  This is especially useful for people who must use their keyboard tab key to work through links.  As you know, many devices don't support a mouse and some people just can't use them.
So remove the outline if you think you should but be ever mindful of any web accessibility features you disable.  Some people might need them.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb