title: jQuery mmenu plugin: Sliding Submenus won't work
body: <p>I'm working with the jquery <a href="http://mmenu.frebsite.nl/" rel="nofollow noreferrer">mmenu</a> plugin, but can't seem to get the sliding submenus to work.</p>
  
  <p>This is my navigation: </p>
  
  <pre><code>&lt;nav id="menu"&gt;
    &lt;ul class="mm-panel"&gt;
      &lt;li&gt;
        &lt;a class="level1-nav" href="#mm-1" data-target="#mm-1"&gt;FIRST&lt;/a&gt;
        &lt;ul class="mm-panel" id="mm-1"&gt;
          &lt;li&gt;&lt;a class="level1-nav" href="#mm-1" data-target="#mm-1"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;a class="level2-nav"&gt;SUB 1 First&lt;/a&gt;
            &lt;ul class="mm-panel" id="mm-2"&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 Second&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 Third&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SUB 1 Second&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SUB 1 Third&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SUB 1 Fourth&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;SECOND&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;THIRD&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;FOURTH&lt;/a&gt; &lt;/li&gt;
    &lt;/ul&gt;
    &lt;a id="close-menu" href="#"&gt;Close&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I want the regular sliding submenus to work. However they don't work at all.</p>
  
  <pre><code>     $(function() {
          $("#menu").mmenu({
              iconPanels  : {
                  add         : true,
                  visible     : 1
              },
              navbar      : {
                  add         : false
              },
              classes     : "mm-light",
              counters    : false,
              searchfield : false,
              slidingSubmenus : true, 
              header      : {
                  add     : true,
                  update  : true,
                  title   : false,
                  titleLink : "none",
              },
              onClick: {
                  close: false
              }
       })
  
       var API = $("#menu").data( "mmenu" );
  
       $("#close-menu").click(function() {
            API.close();
       });
  </code></pre>
  
  <p>Opening and closing of the menu works with animation. However the submenu of item "FIRST" does not work</p>
  
  <p>Look at this video demonstrating it:</p>
  
  <p><a href="https://i.stack.imgur.com/UFmnK.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UFmnK.gif" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <pre><code>&lt;nav id="menu"&gt;
    &lt;ul class="mm-panel"&gt;
      &lt;li&gt;
        &lt;span class="level1-nav" data-target="#mm-1"&gt;FIRST&lt;/span&gt;
        &lt;ul class="mm-panel" id="mm-1"&gt;
          &lt;li&gt;&lt;span class="level1-nav" data-target="#mm-1"&gt;Back&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;span class="level2-nav" data-target="#mm-2"&gt;SUB 1 First&lt;/span&gt;
            &lt;ul class="mm-panel" id="mm-2"&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 Second&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;SUB 2 Third&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span data-target="#"&gt;SUB 1 Second&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span data-target="#"&gt;SUB 1 Third&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span data-target="#"&gt;SUB 1 Fourth&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;span data-target="#"&gt;SECOND&lt;/span&gt; &lt;/li&gt;
      &lt;li&gt;&lt;span data-target="#"&gt;THIRD&lt;/span&gt; &lt;/li&gt;
      &lt;li&gt;&lt;span data-target="#"&gt;FOURTH&lt;/span&gt; &lt;/li&gt;
    &lt;/ul&gt;
    &lt;a id="close-menu" href="#"&gt;Close&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>