Standardowe menu - wyróżnienie aktywnej pozycji i całego drzewa + gafika w CSS

[armorek]

Witajcie.
Mam taki skromny problem, chciałbym zrobić takie drzewko w standardowym menu.

http://s1.fotowrzut.pl/63UUAM0BET/1.jpghttp://s1.fotowrzut.pl/KXDG2RGWMD/1.jpg
Ogólnie to dodałem nazwę CSS do menu i do poszczególnych wpisów definiując je jako folder lub strona.
Jak widać na obrazku nie działa to prawidłowo.
W kodzie mam tak:

<div class="dd-blockcontent">
<ul class="menu-artykuly">
<li class="item-485 active deeper parent">
<a class="menu-folder" href="/index.php/lista-components">Lista components</a>
<ul>
<li class="item-487 active deeper parent">
<a class="menu-folder" href="/index.php/lista-components/administrator-components">Administrator Components</a>
<ul>
<li class="item-489 current active">
<a class="menu-strona" href="/index.php/lista-components/administrator-components/users">Users</a>
</li>
</ul>
</li>
<li class="item-488">
<a class="menu-strona" href="/index.php/lista-components/contacts">Contacts</a>
</li>
</ul>
</li>
<li class="item-486">
<a class="menu-strona" href="/index.php/lista-content-modules">Lista content modules</a>
</li>
<li class="item-280 parent">
<a href="/index.php/using-joomla">Using Joomla!</a>
</li>
</ul>
</div>


.dd-block ul>li:before
{
content: url('../images/blockbullets.png');
margin-right: 3px;
margin-bottom: 0px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
margin-left: -10px;
}

.dd-blockcontent .menu-artykuly li:before
{
content:'';
margin-right: 0px;
}
.dd-blockcontent .menu-artykuly ul:before
{
content:'';
margin-right: 0px;
}


.dd-blockcontent .menu-artykuly .active .menu-folder:before
{
content: url('../images/folderopen.png');
margin-right: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.dd-blockcontent .menu-artykuly .active .menu-folder
{
font-weight:bold;
}
.dd-blockcontent .menu-artykuly .menu-folder:before
{
content: url('../images/folder.png');
margin-right: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.dd-blockcontent .menu-artykuly .menu-folder
{
font-weight: normal;
}


.dd-blockcontent .menu-artykuly .active .menu-strona:before
{
content: url('../images/strona.png');
margin-right: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.dd-blockcontent .menu-artykuly .active .menu-strona
{
font-weight:bold;
}
.dd-blockcontent .menu-artykuly .menu-strona:before
{
content: url('../images/strona.png');
margin-right: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.dd-blockcontent .menu-artykuly .menu-strona
{
font-weight: normal;
}


.dd-menu-image
{
vertical-align:middle;
}

To pierwsze czyli .dd-block ul>li:before słuzy mi do dodania ikonki do wszystkich menu na stronie, potem używam .dd-blockcontent .menu-artykuly ul:before i .dd-blockcontent .menu-artykuly li:before żeby wykasować te ikonki w menu-artykuly.

Może ktoś z Was coś takiego robił ? Nie wiem za bardzo jak się podpiąć przez CSS tylko do wybranej opcji w menu + całe drzewko które do niej prowadzi.
Coś jak np. w Jesteś tutaj: Lista components > Contacts i żeby zaznaczyło się tylko Lista components i Contacts ale bez Administrator Components itd.
Pozdrawiam.

[armorek]

Ok poradziłem sobie sam i mam teraz proste menu "drzewkowe" i wygląda na to że wszystko działa dobrze. Proste menu klikane, bez JavaScriptu i dodatków.
http://s1.fotowrzut.pl/ZDZ9TX8OFJ/1.jpg

Jeżeli ktoś byłby zainteresowany to mógłbym się tutaj podzielić.

[jomka2]

Z tego co widze to jest OK.

[armorek]

Teraz już działa bo poradziłem sobie sam. Nie wiem czy zrobiłem to prawidłowo, oceńcie a jak coś to proszę o uwagi, bo może da się to zrobić łatwiej bez żadnej ingerencji w kod a tylko za pomocą CSS a po prostu nie znalazłem go bo się na tyle nie znam.
Zrobiłem to tak, wersja dla standardowego skopiowanego mod_menu do stylu.

http://s1.fotowrzut.pl/5LDEJ2BL1M/1.jpg