Выделять элементы при наведении курсором мыши принято уже давно: разработчики меняют фон, начертание текста, подчеркивание и т.д.

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

А теперь заставим меняться фоновое изображение плавно. К каждому пункту меню добавим новый элемент strong (можно выбрать другой неблочный: span, i и т.д.). Он будет отвечать за активное состояние пункта меню, в то время как ссылка a - за неактивное.

<ul>
	<li>
		<a href="#"><strong>Контакты</strong></a>
	</li>
	...
</ul>

Плавный эффект достигается за счет того, что меняется прозрачность вложенного элемента, в моем случае strong: strong невидим - меню не активно.

Вот так выглядит реализация меню на jQuery:

$('#menu a').hover(function() {
	$(this).children('strong').stop().fadeTo(500, 1);
}, function () {
	$(this).children('strong').stop().fadeTo(500, 0);
}).children('strong').empty().css('opacity', 0);

И то же самое, используя Mootools:

$$($$('#menu a').addEvents({
	'mouseover': function(){
		this.getChildren('strong').fade('in');
	},
	'mouseout': function(){
		this.getChildren('strong').fade('out');
	}
}).getChildren('strong')).fade('hide').set('html', '');

Ниже ссылки с примерами:
CSS меню: смотреть, скачать
jQuery меню смотреть, скачать
Mootools меню смотреть, скачать