title: Closing a secondary navigation menu with jQuery
body: <p>I just took some contracting work and part of it involves using jQuery, which I've never used before. This seems pretty trivial, but I haven't been able to get our secondary navigation menu to close when somebody clicks outside of the menu. Here is the code:</p>
  
  <pre><code>    $(".products-list li").on("click",function(){// for selected product item
  
      $('.products-list li').removeClass('active');
  
      $(this).addClass('active');
  
  });
  
  
  
  $("#navigation-menus").on("click",function(){ // for menus close outside click
  
      $('#navigation-menus').removeClass('open');
  
      console.log('The function is being called');
  
      $('.navigation-panel').removeClass('open');
  
      $('.menus-main-list').removeClass('open');
  
  });
  
  
  
  
  
  $("#menu-product").hover(function (){
  
      $('#navigation-menus').addClass('open');
  
      $('#product-menu-list-2').removeClass('open');
  
      $('#product-menu-list-1').addClass('open');
  
  
  
  });
  
  
  
  
  
  
  $("#menu-information").hover(function (){
  
      $('#navigation-menus').addClass('open');
  
      $('#product-menu-list-1').removeClass('open');
  
      $('#product-menu-list-2').addClass('open');
  
  });
  
  
  
  $(".menus-main-list").hover(function (){
  
      $('.menus-main-list').removeClass('open');
  
      $(this).addClass('open');
  
  });
  </code></pre>
  
  <p>Here's the HTML. By the way, I just got here and I didn't write any of this. Part of my job is to clean this up. It's kind of a mess.</p>
  
  <pre><code>&lt;nav id="navigation-menus" class=""&gt;
  
  &lt;div class="navigation-panel" id="product-menu-list-1"&gt;
  
  &lt;ul&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="#"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;
  
    &lt;/a&gt;
  
    &lt;div class="nm-submenus-list"&gt;
  
       &lt;ul&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/li&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="#"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;Services&lt;/span&gt;
  
    &lt;/a&gt;
  
    &lt;div class="nm-submenus-list"&gt;
  
       &lt;ul&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/li&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="#"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;Education&lt;/span&gt;
  
    &lt;/a&gt;
  
    &lt;div class="nm-submenus-list"&gt;
  
       &lt;ul&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="x.html"&gt;&lt;span class="test-nav-menu-item"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  
  &lt;/div&gt;
  
  
  
  &lt;div class="navigation-panel" id="product-menu-list-2" style="display:none;"&gt;
  
  &lt;ul&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="about_us.html"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;About Us&lt;/span&gt;
  
    &lt;/a&gt;
  
  
  
  &lt;/li&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="social_media.html"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;Social Media&lt;/span&gt;
  
    &lt;/a&gt;
  
  
  
  &lt;/li&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="reviews.html"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;Reviews&lt;/span&gt;
  
    &lt;/a&gt;
  
  
  
  &lt;/li&gt;
  
  &lt;li class="menus-main-list menus-blue"&gt;
  
    &lt;a href="community-involvement.html"&gt;
  
        &lt;svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"&gt;&lt;circle cx="30" cy="30" r="29"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
        &lt;span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"&gt;&lt;/span&gt;
  
        &lt;span class="test-nav-menu-item"&gt;Community Involvement&lt;/span&gt;
  
    &lt;/a&gt;
  
  
  
  &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  
  &lt;/div&gt;              
  </code></pre>
  
  <p></p>
  
  <p>I'd be really grateful for any help.</p>