цвета для тега <a>

[Rost93]

Здравствуйте. Вообщем есть раскрывающейся список, нужно сделать так чтобы при наведение и нажатие на один из элементов менялся цвет. Я решил сделать это при помощи тега <а>, с наведением справился, но не знаю как сделать так чтобы если нажали то цвет поменялся, а если нажали на другой другой элемент, то у первого цвет стал стандартный. Подскажите пожалуйста как это можно сделать.

[Naive]

для нормальных браузеров (даже для ие8) подойдет и псевдокласс :active
учитывайте только как их разместить: сами линейки классов учитываются на одном уровне приоритета, что их псевдоклассы.
т.е. если код такой:

a {color:red}
a:hover {color:blue}

то при наведении цвет из красного станет синим. Если эти две строчки поменять местами, то цвет не изменится в любом случае.
Исходя из этого стоит учитывать приоритетности стилей ссылки и выстраивать их в соответствие не только задуманному, но и дизайну,напр:

active- hover - visitet - link
//нажата, наведена, посещенная, просто ссылка

п.с. ниразу не видел пока, чтобы дизайнеры прорисовали хотябы эти 4 варианта полностью (нормальный, трезвый, в хорошем настроении верстальщик их додумает. а в большинстве случаев болт положит)
//парлон, что меня так некисло унесло во флейм...

[Rost93]

Хорошо, спасибо! Еще вопрос. Как вы поняли эти ссылки не должны не куда вести, соответственно у них атрибут href="#" как сделать так чтобы они не становились сразу все посещенные "visited"?

[Naive]

Сделайте ссылки на несуществующие страницы.
Я обычно при верстке прописываю "типа будущий функционал", напр. "/Catalog/2" либо конкретные команды, если будущая админка мне знакома.

[Rost93]

Тогда же будет переходит на несуществующие станицы, и выдавать ошибку 404
Я решил по другому, через js, для меня оказалось легче.

PHP код:

function naved(a){
           if(document.getElementById("a"+a).style.color == 'blue'){
            document.getElementById("a"+a).style.color = 'black'
           }
    }
    function nonaved(a){
           if(document.getElementById("a"+a).style.color == 'black'){
            document.getElementById("a"+a).style.color = 'blue'
           }
    }
    function silka (a){
           if(document.getElementById("a"+a).style.color == 'black'){
            document.getElementById("a"+a).style.color = 'red'
           }
            else {
                document.getElementById("a"+a).style.color = 'blue'
            }
    }

<a id="a1" style="color: blue;" onclick="silka(1)" onmouseover="naved(1)" onmouseout="nonaved(1)" href="#">United States of America</a>
<a id="a2" style="color: blue;" onclick="silka(2)" onmouseover="naved(2)" onmouseout="nonaved(2)" href="#">United States of America</a>