Jak utworzyć menu poziome pod logo ze zmieniającymi się kolorami bloków

[Cr3ven]

Witam
Jak utworzyć w Joomli menu poziome pod logiem, aby podświetlony blok zmieniał kolor na inny.
Wiem jak napisać to w CSS mając <ul>, i <li>, ale nie wiem jak to w joomli wygląda.
Czyli jak to zmienić, żeby działało:


<div id="mainnav">

<jdoc:include type="modules" name="mainnav" style="xhtml" />

</div> <!-- mainnav -->
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

ul {
float: left;
background-color: #fff;
padding: 1px 0 1px 1px;
border: 1px solid #000;
}

ul li {
float: left;
}

ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 10px 20px;
border-right: 1px solid #fff;
border-right: 1px solid #fff;
}

ul a:hover {
background-color: #800;
background-image: url("tlo2.gif");
}

[a_m]

chcesz zobaczyć jaki kod generuje Joomla! podglądaj go Firebugiem (http://getfirebug.com/), wszystko stanie się mniej zagadkowe

[Gall Anonim]

Bla, bal bla,
takie rzeczy się do tego ma:
onfocus onblur onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown Dostępne w edytorze Jomla. P.A
To z palucha,
a w css:
To mi się już za bardzo chce spać :-) więc może rano :-)
No dobra, dorzucę przeklejkę CSS przy menu tworzonym na jednym obrazku w trzech kolorach.

{
position: relative;
display: block;
overflow: hidden;
height: 15px;
cursor: pointer;
text-decoration: none;
}

.art-menu ul li
{
margin:0;
clear: both;
}


.art-menu a .r, .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 45px;
background-image: url('../images/menuitem.png');
}

.art-menu a .l
{
left: 0;
right: 7px;
}

.art-menu a .r
{
width: 414px;
right: 0;
clip: rect(auto, auto, auto, 407px);
}

.art-menu a .t
{
margin-right: 10px;
margin-left: 10px;
color: #FFFFFF;
padding: 0 7px;
margin: 0 7px;
line-height: 15px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top: -15px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top: -15px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top: -15px;
}
.art-menu a:hover .t
{
color: #FDFDFC;
}

.art-menu li:hover a .t
{
color: #FDFDFC;
}

.art-menu li:hover>a .t
{
color: #FDFDFC;
}


.art-menu a.active .l, .art-menu a.active .r
{
top: -30px;
}

.art-menu a.active .t
{
color: #FFFFFF;