How to hide child element child elements in jquery

See more:

jQuery

HTML5

i have a menu populating from mysql table and php upto some nested sublevels.
my menu like this
A
B
C

if click on A first time it showing all the child elements and againg i click child elements of A it displaying child elements also fine.
but the problem is when i click on the B after open all the levels items of A
it showing B subelements fine.But again if i click A it showing all the elements except child child elements also.i used jquery for this.i am new to jquery please anybody can help me thanks in advance.

What I have tried:

<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li><li class="lichild">a1
<ul>
<li class="lichild"><a href="vuv">aaaaaa</a></li><li class="lichild"><a href="xyz">abbbbbb</a></li></ul>
</li></ul>
</li><li class="lichild">A2</li><li class="lichild">A3</li><li class="lichild">A4</li><li class="lichild"><a href="home">A5</a></li></ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li><li class="lichild"><a href="about">B2</a></li></ul>
</li><li class="limain">C
<ul>
<li class="lichild">C1</li><li class="lichild">C2</li><li class="lichild">C3</li><li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild"><a href="abc">A13</a>
</li><li class="lichild"><a href="fgh">A14</a>
</li></ul>
</li><li class="lichild"><a href="cde">A11</a>
</li></ul>
</li><li class="lichild"><a href="abcd">A9</a>
</li></ul>
</li><li class="lichild"><a href="nop">A7</a>
</li></ul>
</li><li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild"><a href="klm">D2</a>
</li>
</ul>
</li>
</ul>

$(document).ready(function(){
  $(".lichild").parent().hide();

  $(".limain").click(function(){
    $(this).children('ul').show();
    $(this).siblings(".limain").children('ul').hide();
  });
  $(".lichild").click(function(){
    $(this).children('ul').show();
    $(this).siblings().children('ul').hide()
  });
});