Поомогите "допилить" меню на спрайтах - Вопросы по CSS

Доброго времени суток.

Хочу сделать меню на спрайтах, которое состоит из изображения (иконки) и текста (текст под иконками).
Нашёл пример создания тут: http://ruseller.com/lessons.php?rub=29&id=523
Сделал - всё ок, за исключением одного важного для меня нюанса.

Мне нужно, что бы  под изображением был и текст меню (в виде текста, а не изображения естественно), в данном примере этот текст вынесен за пределы экрана так:


Значение -9999px я убираю на "0" и текст размещается поверх графической части кнопки, а мне нужно спустить его под изображение.
Что только не пробовал - не выходит... подскажите, пожалуйста, как это реализовать?

Можно на другом примере или ссылку на соответствующий материал...

Моя задача:
меню в виде иконок под которыми название пункта меню.
Неактивный пункт серого цвета (изображение и текст). а при наведении (независимо, на текст иди изображение) спрайт меняется на цветную часть иконки и текст так же меняет цвет.

Заранее благодарю за любую помощь и подсказки.

Пропиши стиль для #menu li

Т.е. я убрал text-indent:-9999px; и добавил последние 3 строки.

Спасибо! Поставил плюсик.

Однако. этот метод приводит к тому. что меню становится вертикальным.
А если добавить display: inline; , то совсем что-то непонятное становится.

Как сделать, что бы меню было горизонтальным?

На демо сайте у меня все выглядит так.

Покажите свой сайт.

Сделал всё ещё раз и получилось  В прошлый раз что-то напутал видимо...
Ещё раз огромное спасибо!