Создание меню картинками

Здравствуйте!
Я новичок в этом деле.есть меню-шапка, сверстанное в хтмл. Такая задача! Надо сделать верхнее меню, где кнопки в виде картинок!
При простой вставке картинки в меню, Джумла создает кучу своих классов, из-за чего не имею возможности поставить картинку на то место, которое нужно!

Можно ли это сделать без использования специальных модулей!

Вот мой код:

<div id="topMenu">
<ul id="menu">
<li><a href="#" class="balls"><jdoc:include type="modules" name="user5" style="-1" />Шары <span></span></a></li>
<li><a href="#" class="humor"><jdoc:include type="modules" name="user5" style="-1" />Юмор <span></span></a></li>
<li><a href="#" class="photo"><jdoc:include type="modules" name="user5" style="-1" />Фотогалерея <span></span></a></li>
<li><a href="#" class="hol"><jdoc:include type="modules" name="user5" style="-1" />Праздники <span></span></a></li>
<li><a href="#" class="eq"><jdoc:include type="modules" name="user5" style="-1" />Оборудование <span></span></a></li>
<li><a href="#" class="cont"><jdoc:include type="modules" name="user5" style="-1" />Контакты <span></span></a></li>
</ul>
</div>

CSS:

#topMenu {
list-style: none;
padding: 0;
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: #ffffff;
background: url(images/menu_bg.jpg);
background-repeat: no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
//////
//////
////

#menu .eq{
width: 200px;
height: 50px;
background: url(images/eq.png) no-repeat;
left: 581px;
top: 281px;
}

 

привязываетйсь жестко к классу Item..

 

Как-то странно ты меню делаешь... Для создания меню есть модуль mainmenu. Затем через css ставишь background который тебе нужен.. И текст куфоном...