title: JQuery Drop Down Menu list
body: <p>Thanks for your help in advance as this is driving me crazy. What I'm trying to do is have a sub list slide down once user has clicked on a &lt; li class="subMenu" > and then have it slide back up onClick (it's going on a mobile site). I can't figure out why this isn't working.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;ul class="dropdown"&gt;
  &lt;li class="subMenu"&gt;
      Menu item
      &lt;ul&gt;&lt;li&gt;sub 1&lt;/li&gt;&lt;li&gt;sub 2&lt;/li&gt;&lt;li&gt;sub 3&lt;/li&gt;&lt;/ul&gt;        
  &lt;/li&gt;
  &lt;li class="subMenu"&gt;
      Menu item 2        
      &lt;ul&gt;&lt;li&gt;sub 1&lt;/li&gt;&lt;li&gt;sub 2&lt;/li&gt;&lt;li&gt;sub 3&lt;/li&gt;&lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="subMenu"&gt;
      Menu item 3
      &lt;ul&gt;&lt;li&gt;sub 1&lt;/li&gt;&lt;li&gt;sub 2&lt;/li&gt;&lt;li&gt;sub 3&lt;/li&gt;&lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="subMenu"&gt;
      Menu item 4        
      &lt;ul&gt;&lt;li&gt;sub 1&lt;/li&gt;&lt;li&gt;sub 2&lt;/li&gt;&lt;li&gt;sub 3&lt;/li&gt;&lt;/ul&gt;        
  &lt;/li&gt;    
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    ul li {list-style-type: none;}
      ul {overflow:hidden;}
      ul li {cursor:pointer;float:left;padding: 3px;margin:0 5px;width:80px;background:#ccc;}
      ul ul {display:none}
      ul ul li {clear:both;}
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    $(function(){
  $(document).mousedown(function(){
      $('.dropdown .active').removeClass('active').children('ul').hide();
  })
  $('.dropdown').on('mousedown','.subMenu', function(e){
      e.stopPropagation();
      var elem = $(this);
      if(elem.is('.active')) {
          elem.children('ul').slideUp(150);
          elem.removeClass('active');
      } else {
         $('.dropdown .active').removeClass('active').children('ul').hide();
          elem.addClass('active').children('ul').slideDown(150);
      }
  });
  $('.subMenu').on('mousedown','ul', function(e){
      e.stopPropagation();
      alert('menu item clicked');
  });       
      })
  </code></pre>
  
  <p>Please help!</p>
  
  <p>Mat</p>