title: Fold the parent node until mouseout its children nodes
body: <p>I'd like to make a responsive navigation content,<br>
  when I mouseover a "level-1" title, it will unfold its sub-titles,<br>
  while mouseout the sub-titles, it will fold them all.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul&gt;
  &lt;li class="level-1"&gt; &lt;a href=""&gt;HTML&lt;/a&gt;
      &lt;ul&gt; &lt;li&gt; &lt;a href=""&gt;1.Abstract Sections&lt;/a&gt;
               &lt;ul&gt;
                  &lt;li&gt; &lt;a href=""&gt;1.Header&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;2.Footer&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;3.A.Main&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;4.B1.Nav&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;5.B2.Aside&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt;2.Block&lt;/a&gt;
              &lt;ul&gt; &lt;li&gt; &lt;a href=""&gt;Headers&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;Paragraphs&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;List&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;Table&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;Quotation&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;&lt;!-- html --&gt;
  &lt;li class="level-1"&gt; &lt;a href=""&gt;CSS&lt;/a&gt;
      &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Boxes&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;a href=""&gt;Margin&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;Padding&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href=""&gt;Border&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Layout&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Text&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(e){
      $("body&gt;ul&gt;li&gt;ul").hide();
      $("body&gt;ul&gt;li&gt;a").on("mouseover",function(e){
          e.preventDefault();
          // alert("clicked");
          $(e.target).next().show();
      });
      $("body&gt;ul&gt;li").on("mouseout",function(e){
          e.preventDefault();
          // alert("clicked");
          $(e.target).next().hide();
      });
  
  })
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The codes works partially, but when I mouseout the level-1 title, it's folded. I want it stay unfolded until I leave its sub-titles.</p>