title: Click event's problems in the menu
body: <p>I want that my menu has the ability that when I click on other part of my website, my menu closes (not open). </p>
  
  <p>I know I have to use a click event for that, but when I used a click event, my menu had 2 unwanted problems:</p>
  
  <p>1- first of all when clicked on the list of menu it shows the underline for every item of menu that is unwanted.</p>
  
  <p>2 - after clicking on other part of my website , my menu totally be disappeared and it (menu) dosen't show in my website , that is too bad.</p>
  
  <p>Then I wanna using click events (or every tthing like that) but how can I solve these unwanted problems ?</p>
  
  <p>I am too confused , I Appreciate it if you get the code instead of the link,thanks.</p>
  
  <h2>The code:</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('click', function(event) {
    if (event.target.closest('.nav')) {
      return;
    } else {
     document.querySelector('#dropdown').style.display = 'none';  
    }
  });
    
   function toggle(element) {
    const nodes = getChildNodes(element.parentElement);
    if(nodes[1].style.display === 'block') {
      nodes[1].style.display = 'none';
    } else {
      nodes[1].style.display = 'block';
    }
  }
  
  function getChildNodes(node) {
    let children = new Array();
    for(const child in node.childNodes) {
      if(node.childNodes[child].nodeType == 1) {
        children.push(node.childNodes[child]);
      }
    }
    return children;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#ABT-Container  {
    font-family: 'Roboto', sans-serif;
    background: transparent;
    width:100%; float:right;
  }
  
  a {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #333;
  }
  
  .nav {
    float: right;
    font-family: 'Roboto', sans-serif;
    padding: 2px 6px 0;
    line-height: 100%;
    border-radius: 1em;
    background: white; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFFFFF,  #FFFFFF); /* for firefox 3.6+ */
    border: solid 1px white;
  }
  
  .nav .current a, .nav li:hover &gt; a {
   font-family: 'Roboto', sans-serif;
      background: white; /* for non-css3 browsers */
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
      background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
      background: -moz-linear-gradient(top,  #FFFFFF,  #FFFFFF); /* for firefox 3.6+ */
  
      color: #444;
      border-top: solid 1px #FFFFFF;
      /*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
      text-shadow: 0 1px 0 rgba(255, 255, 255, .8);*/
  }
  /* sub levels link hover */
  .nav ul li:hover a, .nav li:hover li a {
   font-family: 'Roboto', sans-serif;
      background: none;
      border: none;
      color: #666;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
  }
  .nav ul a:hover {
   font-family: 'Roboto', sans-serif;
      background: #ff4718 !important; /* for non-css3 browsers */
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4718', endColorstr='#FF0000'); /* for IE */
      background: -webkit-gradient(linear, right top, right bottom, from(#ff4718), to(#FF0000)) !important; /* for webkit browsers */
      background: -moz-linear-gradient(top,  #ff4718,  #FF0000) !important; /* for firefox 3.6+ */
  
      color: #fff !important;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }
  
  
  .nav li {
    font-family: 'Roboto', sans-serif;
    margin: 0 5px;
    padding: 0 0 8px;
    float: right;
    position: relative;
    list-style: none;
  }
  
  /* main level link */
  .nav a {
    font-family: 'Roboto', sans-serif;
    color: #353535;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
  }
  
  /* level 2 list */
  .nav ul {
    font-family: 'Roboto', sans-serif;
    background: #FFFFFF; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #FFFFFF); /* for firefox 3.6+ */
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    right: 0;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  }
  
  /* dropdown */
  .nav ul li {
    font-family: 'Roboto', sans-serif;
    float: none;
    margin: 0;
    padding: 0;
  }
  
  .nav ul a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
  }
  
  /* level 3+ list */
  .nav ul ul {
    font-family: 'Roboto', sans-serif;
    right: 181px;
    top: -3px;
  }
  
  /* rounded corners for first and last child */
  .nav ul li:first-child &gt; a {
    -webkit-border-top-right-radius: 1px;
    -moz-border-radius-topleft: 1px;
    -webkit-border-top-left-radius: 1px;
    -moz-border-radius-topright: 1px;
  }
  
  .nav ul li:last-child &gt; a {
    -webkit-border-bottom-right-radius: 1px;
    -moz-border-radius-bottomleft: 1px;
    -webkit-border-bottom-left-radius: 1px;
    -moz-border-radius-bottomright: 1px;
  }
  
  /* clearfix */
  .nav:after {
    font-family: 'Roboto', sans-serif;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  .nav {
    font-family: 'Roboto', sans-serif;
    display: inline-block;
  }
  
  html[xmlns] .nav {
    font-family: 'Roboto', sans-serif;
    display: block;
  }
  
  * html .nav {
    height: 1%;
  }
  
  .menu_line{
    width: 25px;
    height: 2px;
    background-color: black;
    color: black;
    margin: 4px 0;
  }
  
  .expand{font-size:24px;float: left;margin: 0px -5px;}
  
  .menu_line{
   width: 25px;
      height: 2px;
      background-color: black;
   color: black;
      margin: 4px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="bg1" class="navbar"&gt;
                  
                    
        
                      &lt;div id="ABT-Container"&gt;
                      &lt;a href="index.html"&gt;&lt;img src="img/new pic/Home.png" width="166" height="40"/&gt;&lt;/a&gt;
      
      
      
      
  &lt;ul class="nav" id="dropdown"&gt;&lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;p class="menu_line"&gt;&lt;/p&gt;&lt;p class="menu_line"&gt;&lt;/p&gt;&lt;p class="menu_line"&gt;&lt;/p&gt;&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;span class="expand"&gt;&amp;#x25C2;&lt;/span&gt;Our Technology&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;span class="expand"&gt;&amp;#x25C2;&lt;/span&gt;Sub-Row&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row 1 clicked')"&gt;Sub Sub-Row 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row 1 clicked')"&gt;Sub Sub-Row 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row 1 clicked')"&gt;Sub Sub-Row 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row 1 clicked')"&gt;Sub Sub-Row 1&lt;/a&gt;&lt;/li&gt;
  &lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;span class="expand"&gt;&amp;#x25C2;&lt;/span&gt;Sub-Row&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row 2 clicked')"&gt;Sub Sub-Row 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row clicked')"&gt;Sub-Row&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub Sub-Row clicked')"&gt;Sub-Row&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;span class="expand"&gt;&amp;#x25C2;&lt;/span&gt;Multi-Levels&lt;/a&gt;
  &lt;ul id="dropdoswn"&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Team clicked')"&gt;Team&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 1 clicked')"&gt;Sub-Level Item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 1 clicked')"&gt;Sub-Level Item 1&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 11 clicked')"&gt;Sub-Level Item 11&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 22 clicked')"&gt;Sub-Level Item 22&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 33 clicked')"&gt;Sub-Level Item 33&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
                     
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 1 clicked')"&gt;Sub-Level Item 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Sales clicked')"&gt;Sales&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Another Link clicked')"&gt;Another Link&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="toggle(this)"&gt;&lt;span class="expand"&gt;&amp;#x25C2;&lt;/span&gt;Department&lt;/a&gt;
   &lt;ul&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 2 clicked')"&gt;Sub-Level Item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 2 clicked')"&gt;Sub-Level Item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#" onclick="console.log('Sub-Level Item 2 clicked')"&gt;Sub-Level Item 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;&lt;li class="w3-animate-right"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;   
  &lt;li class="w3-animate-right"&gt;&lt;a href="#"&gt;About US&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#"&gt;Contact US&lt;/a&gt;&lt;/li&gt;
  &lt;li class="w3-animate-right"&gt;&lt;a href="#"&gt;Our Links&lt;/a&gt;&lt;/li&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
                      &lt;!-- Header Nav End --&gt;
                      
              &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>