Почему мой css не вступает в силу для: link, a: посещения, a: hover, a: active?

Question

У меня есть таблица с одним столбцом

<table>
   <tr>
     <td width="30"  class="top-nav"><a href="#">Home</a></td>
     <td width="30" class="top-nav"><a href="#">About</a></td>
     <td width="30" class="top-nav"><a href="#">Contact</a></td>
   </tr>
</table>

Я бы хотел, чтобы CSS-столбец имел эффект наведения мыши, поэтому я сделал следующее:

.top-nav a{
   display: block;
   padding: 3px;
   text-decoration: none;

}

.top-nav a:link, .top-nav a:visited{
   color: #000000;
   background-color: #1d5987;

}
.top-nav a:hover, .top-nav a:active{
   color: #ffffff;
   background-color: #666666;

}

Но мой CSS не влияет на a:link ,a:visited, a:hover, a:active фон и изменение цвета шрифта ячейки таблицы, почему?

Answer 1

Работает, если убрать лишние , здесь

.top-nav a:visited,

и

.top-nav a:active,

См. Пример: http://jsfiddle.net/jasongennaro/ZSbdH/