title: jQuery accordion for multiple nested lists
body: <p>I'm struggling to incorporate the second nested list of my menu so that they can open onclick. Below is my code. </p>
  
  <p>Also, how can I make it so clicking to expand a list doesn't trigger any other events? Right now if you click them, my entire menu slides closed from another script (this is for a mobile responsive menu) So if my menu-item li has a nested list, I want the click to ONLY open or close its nested list and do nothing else.</p>
  
  <p><a href="http://jsfiddle.net/notanothercliche/36vCh/" rel="nofollow">http://jsfiddle.net/notanothercliche/36vCh/</a></p>
  
  <pre><code>&lt;ul class="menu" id="menu-menu"&gt;
  
      &lt;li class="menu-item&gt;Home&lt;/li&gt; &lt;!-- end Home menu-item --&gt;
  
      &lt;li class="menu-item&gt;Properties
  
      &lt;ul class="dropdown-menu"&gt;
  
          &lt;li class="menu-item&gt;Dubai
  
          &lt;ul class="dropdown-menu"&gt;
  
              &lt;li class="menu-item&gt;Residential
  
              &lt;ul class="dropdown-menu"&gt;
  
                  &lt;li class="menu-item&gt;Apartments&lt;/li&gt;
  
                  &lt;li class="menu-item&gt;Villas&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt; &lt;!-- end Residential dropdown-menu --&gt;
  
                  &lt;/li&gt; &lt;!-- end Residential menu-item --&gt;
  
          &lt;/ul&gt; &lt;!-- end Dubai dropdown-menu --&gt;
  
          &lt;/li&gt; &lt;!-- end Dubai menu-item --&gt;
  
      &lt;/ul&gt; &lt;!-- end Properties dropdown-menu --&gt;
  
      &lt;/li&gt; &lt;!-- end Properties menu-item --&gt;
  
  &lt;/ul&gt; &lt;!-- end menu-menu --&gt;
  </code></pre>