title: sub menu to hide on other parent menu click
body: <p>I was building a menu with sub menus for a custom parallax website. On clicking the parent menu; the sub menus stay displayed which is needed. What I want to do is to hide the sub menus when other parent menu items are clicked. I could really use some help as Im new to j query. Here is my code..</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="navigation"&gt;
      &lt;li data-slide="2"&gt;estate
          &lt;ul class="navigation2"&gt;
              &lt;li data-slide="2"&gt;land&lt;/li&gt;
              &lt;li data-slide="3"&gt;varietal&lt;/li&gt;
              &lt;li data-slide="4"&gt;people&lt;/li&gt;
              &lt;li data-slide="6"&gt;practices&lt;/li&gt;
              &lt;li data-slide="9"&gt;future offerings&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li data-slide="10"&gt;about&lt;/li&gt;
      &lt;li data-slide="13"&gt;location&lt;/li&gt;
      &lt;li data-slide="14"&gt;contact&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>.navigation {
      position:fixed;
      text-align:center;
  }
  .navigation li {
      display:block;
  }
  .navigation li:hover, .active {
      cursor:pointer;
      text-decoration:underline;
  }
  .navigation2 {
      position:fixed;
      text-align:right;
      left:50%;
  }
  .navigation2 li {
      color:#000;
  }
  .navigation2 li:hover, .active {
      cursor:pointer;
      text-decoration:underline;
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$('.navigation2').hide();
  $('.navigation').children().click(function () {
      $(this).children('.navigation2').slideToggle(1000);
  }).children('.navigation2').click(function (event) {
      event.stopPropagation();
  
  }); 
  </code></pre>