Меню. Стиль для каждого пункта

[ilunium]

Здравствуйте.
Появился вопрос по стилизации меню.

Задача в том, что бы при наведении на какой-либо пункт, ему задавался СВОЙ собственный фон, отличный от других. В какую сторону копать?

Для наглядности, обрисую.

Имеем меню:


То есть если навести на пункт2 то получим


При наведении на пункт3 получим

[NightGuard]

http://joomlaforum.ru/index.php/topic,84596.0.html и учите CSS, itemid

[ilunium]

Не могли бы Вы рассказать, в какую сторону капать, с небольшим примером, мыслей нет не каких

[volod3000]

Вот почитай, а дальше необходим учебник по CSS и терпение.

[ilunium]

Спасибо за ответы!
С учебником по CSS дружу постоянно, т.к. не профессионал, а любитель. Написать такую менюшку могу, а вот не получается прикрутить к Джу. А вот как разукрасить каждый пункт, одной меню не понял. Снизу привёл код меню, который работает в текущий момент. Происходит замена фона  при наведении, а как установить уникальный фон для каждого пункта меню при наведении? От чего отталкиваться

Код:

ul#mainlevel-nav {
list-style: none;
padding: 0;
margin-top: 0px;
}

ul#mainlevel-nav li {
float: left;
border-left: 1px solid #dbdbdb;
display: block;
background: url('../images/navta.png') repeat;
width: auto !important;
font-size: 16px;
font-weight: bold;
text-transform: none;
line-height: 30px;
white-space: nowrap;
}

ul#mainlevel-nav a:link, ul#mainlevel-nav a:visited {
padding-left: 15px;
padding-right: 15px;
color: #FFFFFF;
text-decoration: none;
}

ul#mainlevel-nav a:hover {
display: block;
background: url('../images/navth.png') repeat;
width: auto !important;
font-size: 16px;
font-weight: bold;
text-transform: none;
line-height: 30px;
white-space: nowrap;
}

[volod3000]

Грубо так :

а           - отображение при загрузке
a:hover  - отображение при наведение
a:visited - отображение после нажатия

[NightGuard]

Зависит от того какой у вас тип меню, привязку делайте по ItemID