How to hide and show ul and li child element using CSS

See more:

CSS

HTML

PHP

<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a1
<ul>
<li class="lichild">a11
<ul>
<li class="lichild"><a href="a222">a222</a>
</li></ul>
</li></ul>
</li><li class="lichild">a2</li></ul>
</li><li class="lichild">A2<ul>
<li class="lichild"><a href="a">a</a></li></ul>
</li></ul>
</li><li class="limain">B
<ul>
<li class="lichild">B1<ul>
<li class="lichild"><a href="b1">b1</a></li></ul>
</li></ul>
</li><li class="limain">C<ul><li class="lichild">C1
<ul>
<li class="lichild"><a href="c1">c1</a><ul>
<li class="lichild"><a href="c">c</a></li></ul></li></ul></li></ul></li><li class="limain">D<ul>
<li class="lichild">D1<ul><li class="lichild"><a href="d4">d4</a>
</li></ul>
</li><li class="lichild">D3</li></ul>
</li><li class="limain">E
<ul><li class="lichild">E1
<ul><li class="lichild"><a href="e">e</a></li></ul>
</li></ul>
</li><li class="limain">F
<ul>
<li class="lichild">F1
<ul>
<li class="lichild"><a href="f">f</a></li></ul>
</li></ul>
</li></ul>

What I have tried:

I have done css code for displaying main element if i click main element under all child elements should come but in my code is not working.


.limain
{
position: relative;

}

.lichild
{
display: none;
}

.limain a:hover + li
{
display: block;

}