[Netherlandman]

Всем доброго времени суток.
Совсем недавно начал осваивать javascript.
Сейчас пробую писать свой код, тренируюсь так сказать, но вот возникла проблемка, решить которую мне не дает скорее всего определенный пробел в знаниях, поэтому решил обратиться за помощью сюда.

Поставил себе задачу максимум - анимировать простое вертикальное меню, чтобы при наведении на один из пунктов он как бы подрагивал (по факту планирую менять marginLeft от нуля до 20 и обратно).
Сначала пробовал делать все через getElementsByTagName('li') внутри ul с id="navi", чтобы работало для всех пунктов меню, но столкнувшись с проблемами решил сделать все хотя бы для одного элемента.

Меню задается простым списком, вида:

<ul id="navi">
            <li id="mainpage"><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ФОТО</a></li>
            <li><a href="#">ИНФО</a></li>
            <li><a href="#">КОНТАКТЫ</a></li>            
</ul>

в скрипте в head прописываю следующее:

window.onload = function()
{
    var theli = document.getElementById('mainpage');
    theli.style.marginLeft = 0+"px";
    theli.onmouseover = overLi;
}

функция overLi

function overLi ()
{
    var theli = document.getElementById('mainpage');
    var temp = parseInt(theli.style.marginLeft);
    if (temp < 20)
    {
        temp += 2;
        theli.style.marginLeft = temp+"px";
        setTimeout(overLi(), 300);
    }
}

Как видите, для начала хочу добиться хотя бы плавного движения в одну сторону. Но в итоге результатом работы этого кода является то, что при наведении на пункт меню, он сразу же перемещается на 20 пикселей, что поидее должно происходит после 10 выполнений функции overLi с интервалом в 1/3 секунды, тоесть за 3 секунды.
Что самое интересное пробовал вставлять в функцию overLi alert, выбрасывающий значение переменной temp по ходу выполнения. Он работает исправно, каждый раз выдает увеличенное на 2 значение, обрываясь на 20.