title: Slide down <li> of current <ul> being clicked
body: <p>So I'm trying to slide down the <code>&lt;li&gt;</code> of a submenu when the parent <code>&lt;ul&gt;</code> is being clicked but for some reason nothing happens when I click the <code>&lt;ul&gt;</code>. I am currently using this code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="mobile-home-second-menu clearfix"&gt;
      &lt;ul class="home-second-menu clearfix"&gt;
          &lt;li class="first-menu-item"&gt;
              &lt;a href="#"&gt;Main category&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li class="second-menu-item"&gt;
                      &lt;a href="#"&gt;Subcategory&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('ul.home-second-menu').click(function() {
      $(this).next('li').slideDown('normal');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul.submenu{ display:none; }
  *Rest of the CSS is irrelevant*
  </code></pre>
  
  <p>For some reason the <code>.next()</code> call isn't working. When I remove the <code>.next</code> and change the <code>slideDown()</code> to <code>addClass()</code>, it works (it adds a class to ul.home-second-menu like it should). I've been looking at this for way too long now and it's probably a simple mistake but any help would be appreciated!</p>