Un método simple para quitar el borde punteado en estado activo de los enlaces de tu menú o cualquier tipo de link, usando CSS.
Ejemplo
Observad en el ejemplo de arriba que esto es solamente aplicable a los enlaces de tamaño conocido. Es decir, enlaces que tienen una anchura y una altura con sus respectivos valores en píxeles, en ems, porcentage etc.
La idea básica es incluir en el contenido del enlace un elemento adicional (<em> y <span> son aceptables) y, entonces, damos a cada enlace una posición relativa y el al elemento adicional una posición absoluta.
Cuando se clica en el enlace su tamaño se reduce a CERO. Esto hace que el borde punteado no se vea porque sólo se coloca alrededor del enlace, independientemente del contenido.
Como el elemento adicional tiene una posición absoluta, todavía será visible y puedes darle el estilo que quieras en el estado activo.
XHTML
Esto es necesario para permitir que el enlace sea reducido al tamaño cero mientras que todavía muestra el texto clickable del enlace.
Código :
<ul id="navlist"> <li><a href="#nogo"><em>Opción Uno</em></a></li> <li><a href="#nogo"><em>Opción Dos</em></a></li> <li><a href="#nogo"><em>Opción Tres</em></a></li> <li><a href="#nogo"><em>Opción Cuatro</em></a></li> <li><a href="#nogo"><em>Opción Cinco</em></a></li> </ul>
Código :
/*
Paso 1
La lista horizontal BÁSICA
*/
#navlist {
/* Quitamos los círculos de la lista */
list-style-type:none;
/* Quitamos el padding */
padding:0;
/* Cambiamos la anchura total de los enlaces de la lista */
width:36em;
/* Cambiamos el ancho */
height:5em;
/* Centramos la lista */
margin:0 auto;
}
#navlist li {
/* Cambiamos la anchura y la altura de los elementos de la lista */
display:block;
width:7em;
height:2em;
/* Usamos float: para que queden en una línea horizontal */
float:left;
/* Agregamos un espacio entre cada elemento de la lista */
margin-right:0.2em;
}
#navlist li em {
/* Quitamos el estilo acentuado del texto */
font-style:normal;
/* Que sea de color negro */
color:#000;
}
/*
Paso 2
Añadimos la seudo-clase :hover
*/
#navlist a {
/* Cambiamos la anchura y la altura del enlace */
display:block;
width:7em;
height:2em;
/* Damos a los enlaces una posición relativa
de modo que el <em> pueda tener una posición
absoluta dentro de cada enlace */
position:relative;
/* Quitamos el subrayado del texto */
text-decoration:none;
}
/* Damos estilo a <em> */
#navlist a em {
font-style:normal;
color:#000;
/* Damos al texto del <em> el mismo tamaño total que el del enlace */
display:block;
width:7em;
height:1.5em;
border-bottom:0.5em solid #000;
/* Damos al texto del <em> una posición
absoluta de modo que sea sacado del
flujo normal y del control del enlace */
position:absolute;
top:0;
left:0;
/* Hacemos que el cursor del enlace aparezca
cuando el ratón está sobre el texto del <em> */
cursor:pointer;
}
#navlist a:hover {
/* Agregamos un :hover para los enlaces.
Esto es necesario para que IE aplique el :hover al <em> */
color:#c00;
}
#navlist a:hover em {
/* Cambiamos el color del borde inferior de <em> en :hover */
border-bottom:0.5em solid #c00;
}
/*
Paso 3
Quitamos el active/focus dotted border (el borde punteado de cuando está activo)
*/
#navlist a:active, #navlist a:focus {
/* Reducimos el tamaño del enlace a cero cuando el enlace está activo.
¡Esto quita literalmente el borde punteado
que SOLAMENTE se aplica al enlace a sí mismo y no
a ninguno de los elementos que contiene
CUANDO ESOS ELEMENTOS TIENEN UNA POSICIÓN ABSOLUTA! */
width:0;
height:0;
outline:0; /* Para los navegadores que lo entienden */
}
/*
Paso 4
Damos el estado activo
*/
#navlist a:active em, #navlist a:focus em {
/* Cambiamos el borde inferior y el texto
del <em> a azul en estado activo que da así
un alternativa conveniente al borde punteado */
border-bottom:0.5em solid #00c;
color:#00c;outline:0; /* Para los navegadores que lo entienden */
}
el_itur :
div2_blog :
...aunque sea como opción alternativa 
...
