Сообщение 10 янв 2014, 01:34

Как сделать активную ссылку другим размером

Доброго времени суток.
Вопрос таков.
Необходимо в верхнем меню сделать ссылку на которой я сейчас нахожусь чуть больше.
Т.е. когда я на главной ссылка "Главная" не 12рх а 30рх, когда перехожу на ссылку "Контакты" ссылка "Главная" становится снова 12рх, а "Контакты" 30рх

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

#nav {
margin-left: 80px;
position:absolute;
width: 900px;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul li {
background-color: transparent;
}
#nav ul li,
#nav ul li a {
float: left;
display: block;
}
#nav ul li a {
margin: 6px 15px 0 10px;
padding: 5px 10px 5px 10px;
font-size: 1.2em;
color: #fff;
border-bottom: 0px solid black;
font-weight: bold;
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
transition: all linear 0.3s;
/*background-color: black;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;*/
}
#nav ul li a:hover,
#nav ul li a.selected {
color: red;
text-decoration: none;
text-shadow: #777 10px 4px 10px; /* цвет тени, смещение по x, смещение по y, степень размытия */
-webkit-text-shadow: 2px 2px 5px #777; /* Для устаревших Safari, Chrome и iOS */
-moz-text-shadow: 2px 2px 5px #777; /* Для древнего Firefox */
filter: Shadow(Color=#777777, Direction=45, Strength=2); /* Для IE */
font-size: 30px;
}

<div id='nav'>

<noindex>

<ul>
<li><a href='http://site.ru'>Главная</a></li>
</li>
<li><a href='http://site.ru/kontacts'>Контакты</a></li>
</ul>

Спасибо