title: get third level sub-menu to appear in jquery
body: <p>Hi Im attempting to build a menu with jquery, when I click on an anchor I want a sub menu to appear, but when I click on a link within this sub-menu I want another sub-menu to appear.</p>
  
  <p>So , Parent -> Child -> Grandchild</p>
  
  <p>The problem is when I click on Child, it closes that menu as oppose to expanding even more.
  Im assuming this is because its reading the Child and applying the same Jquery even though I dont want it to.</p>
  
  <p><a href="http://jsfiddle.net/4AT8C/" rel="nofollow">http://jsfiddle.net/4AT8C/</a></p>
  
  <pre><code>$("#pop-out-left ul li &gt; a").click(function () {
  $("#pop-out-left ul li")
      .not($(this).parent())
      .removeClass("active");
  $(this).parent().toggleClass("active");
  });
  
  $("#pop-out-left ul li ul li a").click(function () {
  $("#pop-out-left ul li ul li")
      .not($(this).parent())
      .removeClass("active");
  $(this).parent().toggleClass("active");
  });
  </code></pre>
  
  <p>The html...</p>
  
  <pre><code>&lt;div id="pop-out-left"&gt; 
  &lt;ul&gt;
      &lt;li&gt;
          &lt;a&gt;first&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a&gt; second&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;third level&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a&gt;first&lt;/a&gt;
  
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a&gt; second&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;third level&lt;/li&gt;
                      &lt;/ul&gt;                    
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a&gt;first&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a&gt; second&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;third level&lt;/li&gt;
                      &lt;/ul&gt;                       
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS ...</p>
  
  <pre><code>#pop-out-left &gt; ul &gt; li &gt; a + ul {
  display: none;
  }
  #pop-out-left &gt; ul &gt; li.active &gt; a + ul {
  display: block;
  }
  
  #pop-out-left &gt; ul &gt; li &gt; a + ul &gt; li &gt; ul {
  display: none;
  }
  
  #pop-out-left &gt; ul &gt; li &gt; a + ul &gt; li.active &gt; ul {
  display: block;
  }
  </code></pre>