efekt vysunutia položiek pod objekt

Zdravím Vás, neviem si rady pri tvorení webu.
Portebujem spraviť efekt, ktorý po kliknutí na určitý text, vysunie pod ten text ďalší text.
Najlepšie by to bolo cez CSS + HTML...

Už velmi dlho som nekódoval stránky takže si neviem spomenúť ani to niekde neviem nájsť.
Uvediem aj príklad, ako vyzerá asi ten text(kód)...

<ul id="produkty">
<li><a href="" class="style12 style1">1. XxxxxXxxxXxx</a>


<ul>
<li class="style16"><a href="" class="style13">YyyyYyyyyYyyyyyy </a>
<ul>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="l" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
<li><a href="l" class="style2">ZzzZZzzZzzzzZzZzZ</a></li>
</ul>
</li>

Takže, Text X bude zobrazený stále,text Y je položka v X a tiež bude stále zobrazená, ale chcem, aby sa po kliknuti na text Y vysunul text Z, neviem, ako nato.... vedeli by ste mi poradiť?

Vopred Vďaka za pomoc...

V tej diskusii si tam hodil ten posledny koment, take nieco by som potreboval, len JS som este nikdy nerobil, mas na to tu na webe navod?