title: Add class on hover using JavaScript
body: <p>I want to add class on ul that is inside my one li element in nav. My problem is that I want to show list on hover and later click something on it, but when I mouse enter on that li menu shows and when I want to go down and click something menu disappears. I want to do this in vanilla JavaScript.</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-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function () {
      var dropdownItem = document.querySelector('.dropdown-item');
      var dropdown = document.querySelector('.dropdown');
  
      dropdownItem.addEventListener('mouseenter', function (e) {
          dropdown.classList.add('dropdown-show');
      });
      dropdownItem.addEventListener('mouseleave', function () {
          dropdown.classList.remove('dropdown-show');
      })
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .menu {
       list-style: none;
       display: flex;
       width: 30%;
       justify-content: space-between;
       align-items: center;
    }
     .menu li {
       position: relative;
    }
     .menu li a {
       color: #999;
       text-decoration: none;
    }
     .menu .dropdown-item {
       position: relative;
    }
     .menu .dropdown-item .dropdown {
       position: absolute;
       list-style: none;
       top: 5px;
       padding-top: 40px;
       left: -30px;
       visibility: hidden;
       opacity: 0;
       transition: 0.3s;
    }
     .menu .dropdown-item .dropdown .triangle {
       border: 10px solid transparent;
       border-bottom-color: #000;
       width: 0;
       top: 20px;
       left: 50%;
       transform: translateX(-50%);
       position: absolute;
    }
     .menu .dropdown-item .dropdown.dropdown-show {
       opacity: 1;
       visibility: visible;
    }
     .menu .dropdown-item .dropdown li {
       background-color: #000;
       padding: 10px 20px;
       font-weight: lighter;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;
      &lt;li class="dropdown-item"&gt;&lt;a href="#"&gt;O Firmie&lt;/a&gt;
          &lt;ul class="dropdown"&gt;
              &lt;div class="triangle"&gt;&lt;/div&gt;
              &lt;li&gt;&lt;a href="#"&gt;Aktualności&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Nasz team&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Historia&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Galeria&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>