title: Count maximum nested list items JQuery, Javascript, HTML
body: <p>I have an unordered list with nested lists.
  Using Jquery or Javascript, I need to find the maximum count of "second_level_item" list items within all of the nested lists on hover over the "top_level_list" ul.
  For example if I hover over the "top_level_list" below, it should output the number 3, because the second nested list contains 3 items, the maximum amount for any of the given nested lists.</p>
  
  <pre><code>&lt;ul class="top_level_list"&gt;
      &lt;li class="top_level_item"&gt;
          &lt;ul class="second_level_list"&gt;
              &lt;li class="second_level_item"&gt;This list has 1 item - A&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="top_level_item"&gt;
          &lt;ul class="second_level_list"&gt;
              &lt;li class="second_level_item"&gt;This list has 3 items - A&lt;/li&gt;
              &lt;li class="second_level_item"&gt;This list has 3 items - B&lt;/li&gt;
              &lt;li class="second_level_item"&gt;This list has 3 items - C&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My current code retuns the combined total of all list items within all "second_level_list", therefore it outputs number 4.</p>
  
  <pre><code>$(function countMax() {
      $('.top_level_list').hover(
          function () {
              var countMaxItem = $(this).children('.top_level_item').children('.second_level_list').children('.second_level_item').length;
              alert(countMaxItem);
          }, function () {
              //empty
          }
      );
  });
  </code></pre>
  
  <p>Thanks in advance.</p>