title: Why is the sub-menu in this accordion menu not staying open?
body: <p>I adapted a menu from CSS MenuMaker, and I've been hunting for why it behaves differently. It is <a href="http://moonwards.com/planning.html" rel="nofollow">here</a>. When you click on the menu item, the sub-menu opens, but if the mouse remains over the clicked menu item, the rest doesn't move down to make room, and the sub-menu doesn't use the styling it is supposed to. Instead it uses the styling of a top-level menu item. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-2 col-m-2 accordian darkYellow roundLeft"&gt;
      &lt;p class="title"&gt;Melt-in-Place Station (MIP)
      &lt;/p&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;&lt;a&gt;&lt;span&gt;Reference Docs&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://ntrs.nasa.gov/archive/nasa/casi.ntrs.nasa.gov/20150000305.pdf"&gt;
                      &lt;span&gt;Melted regolith construction&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;a&gt;&lt;span&gt;Forum Threads&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;a&gt;&lt;span&gt;Models&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.accordian,
  .accordian ul,
  .accordian li,
  .accordian a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    text-decoration: none;
    line-height: 1;
    font-size: 1em;
    position: relative;
    color: yellow;
  }
  p.title {
      font-weight: 600;
      padding: 16px 6px;
  }
  .accordian a {
    line-height: 1.3;
    cursor: pointer;
  }
  .accordian {
      font-weight: 400;
      color: rgba(255, 255, 0, 1);
      text-align: right;
  }
  .accordian &gt; ul &gt; li {
    margin: 0 0 2px 0;
  }
  .accordian &gt; ul &gt; li:last-child {
    margin: 0;
  }
  .accordian &gt; ul &gt; li &gt; a {
    font-size: 1.1em;
    display: block;
    background: rgba(50, 50, 50, 0.6);
  }
  .accordian &gt; ul &gt; li &gt; a &gt; span {
    display: block;
    padding: 6px 10px;
  }
  .accordian &gt; ul &gt; li &gt; a:hover {
    text-decoration: none;
  }
  .accordian &gt; ul &gt; li.active {
    border-bottom: none;
  }
  .accordian &gt; ul &gt; li.active &gt; a {
      background: #333;
  }
  .accordian &gt; ul &gt; li.has-sub &gt; a span {
    background: url(http://www.moonwards.com/img/iconPlus.png) no-repeat left center; 
  }
  .accordian &gt; ul &gt; li.has-sub.active &gt; a span {
    background: url(http://www.moonwards.com/img/iconMinus.png) no-repeat left center; 
  }
  /* Sub menu */
  .accordian ul ul {
    padding: 5px 12px;
    display: none;
  }
  .accordian ul ul li {
    padding: 3px 0;
  }
  .accordian ul ul a {
    display: block;
    font-size: 0.9em;
    font-weight: 400italic;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>( function( $ ) {
  $( document ).ready(function() {
  $('.accordian &gt; ul &gt; li &gt; a').click(function() {
    $('.accordian li').removeClass('active');
    $(this).closest('li').addClass('active'); 
    var checkElement = $(this).next();
    if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
    if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
      $('.accordian ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
      return true;
    } else {
      return false;   
    }     
  });
  });
  } )( jQuery );
  </code></pre>
  
  <p>I assume this is some dumb thing, but any help appreciated.</p>