Проблема с меню

[Caeterra]

Всем привет! Помогите решить такую проблему?

У меня меню с кодом:

<div class="container">
<ul class="menu">
 <li><a href="#"> <span>Ссылка1</span></a></li>
 <li><a href="#"> <span>>Ссылка2</span></a></li>
 <li><a href="#"> <span>>Ссылка3</span></a></li>
 <li><a href="#"> <span>>Ссылка4</span></a></li>
 <li><a href="#"> <span>>Ссылка5</span></a>></li>
</ul>
</div>

CSS:

.container{
 width: 100%;
 height: 100%;
 position: relative;
 }


.menu{
 width: 100%;
 margin: 0 auto;
 position: relative; 
 }

.menu li{
 list-style: none;
 }

.menu li a{
 display: block;
 padding: 0px 0 0px 10px;
 text-align: left;
 position: relative;
 z-index: 110;
 }

.menu li:hover a{
 background: url("/img/vector_right.png") ;
 background-repeat:no-repeat;
 background-position: 0 -1px;
 text-decoration: underline;
 }

.menu li a span{
 display:block;
 }

.menu li a span:first-child{
 padding:3px 0 7px 0;
 }

Проблема в том, чтобы первая ссылка по умолчанию была выделена, а при наведении на остальные становилась обычного цвета, и соответственно когда убираешь курсор с cskjr? она снова становилась выделенной..

Есть решение?

[Switch74]

могу предложить .menu:hover a{делаем все ссылки норм} a:hover{подсвечиваем наведенную ссылку}

[SelenIT]

Поколдуйте со специфичностью селекторов, наподобие такого (это на скорую руку, можно оптимальнее).

upd: долго же я ссылку копировал)))

[Caeterra]

Нет. это не то.. Мне нужно не при наведении, а первая выделялась, пока на другую не наведешь..

[SelenIT]

В моем примере разве не выделяется? Что за браузер?

[Caeterra]

SelenIT, спасибо большое! То, что нужно!