title: Vertical menu show on click menu staying open
body: <p>Looking for help with a vertical flyout menu that opens on click, then remains open until another menu item is clicked (doesn't disappearing when hovering off). Also once both have been click rollover states do not show until clicked. Below is a codepen link
  <a href="http://codepen.io/matriplett/pen/JoVdYz" rel="nofollow">http://codepen.io/matriplett/pen/JoVdYz</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;nav class="nav" &gt;
  &lt;ul id="main-menu" class="nav parent"&gt;
  &lt;li class="parent"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 2&lt;/a&gt;
    &lt;ul class="sub-sub-menu"&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 2&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 3&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 4&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="parent"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 2&lt;/a&gt;
  &lt;ul class="sub-sub-menu"&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 2&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#"&gt;sub 3&lt;/a&gt;
      &lt;ul class="sub-sub-menu"&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 2&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;sub sub 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>scss</p>
  
  <pre><code>.nav {
      border: 0;
      padding:2%;
  
      ul {    
      }
  
      li {
          position: relative;
          text-transform: uppercase;
          font-size: 1em;
       list-style:none;
  
  
          a {
              border-bottom: 0;
              line-height: 1.2;
        color:#000;
            text-decoration:none;
              &amp;:hover, &amp;:focus {
                  color: #56a0d3;
              }
          }
  
          ul.sub-menu{
              margin-left:40px;
              margin-top:-18px;
              border-top: 0;
              position: absolute;
              visibility: hidden;
              z-index: 8999;
              display:block;
        line-height:2;
  
              li {
  
                  a {
                      margin-top:0;
                      padding-left: 10px;
                      border-right: 0;
                      display: block;
                      line-height: 1.2;
                      color: #56aod3;
  
                      &amp;:hover,
                      &amp;:focus {color:red;}
  
                      &amp;:link {}
                  }
  
  
  
              }
  
          }
  
          /* showing sub-menus */
          &amp;:hover &gt; ul {
              top: auto;
              visibility:visible;
          }
  
      } /* end .menu ul li */
  
      /* highlight current page */
      li.current-menu-item,
      li.current_page_item,
      li.current_page_ancestor {
          a { color:#56a0d3;}
      }  /* end current highlighters */
  
  
    sub-sub-menu  ul li a {
      margin-left:300px;
    }
  } /* end .nav */
  
  
  
  /* keep home page nav open on click*/
  
  $('.sub-menu').hide(); //Hide children by default
  
  $('.parent').children().click(function(){
      $(this).children('.sub-menu').slideToggle('fast');     
  }).children('.sub-menu').click(function (event) {
      event.stopPropagation();
  </code></pre>
  
  <p>});</p>