title: JS dropdown menu best practice
body: <p>I want to implement the following tiny drop down menu into my project.</p>
  
  <p>Is there anything inherently wrong with my code? I attempted the <code>:hover</code> pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?</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.querySelector('.dropbtn').addEventListener('mouseenter', function(){
    document.querySelector('.dropdown-content').style.visibility = 'visible'
  })
  
  document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
    document.querySelector('.dropdown-content').style.visibility = 'hidden'
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown {
    display: flex;
    align-items: flex-start;
  }
  
  .dropbtn {
      background-color: darkslategray;
      color: white;
      padding: 6px 10px 6px;
      font-size: 18px;
      border: none;
      cursor: pointer;
  }
  
  .dropdown-content {
    background-color: darkslategray;
    display: inline-grid;
    visibility: hidden;
    padding: 6px 10px 6px;
  }
  
  img {
    margin: 3px;
    height: 40px;
    width: 120px;
    border: 1px solid gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;button class="dropbtn"&gt;Dropdown&lt;/button&gt;
    &lt;div class="dropdown-content"&gt;
      &lt;img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""&gt;
      &lt;img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""&gt;
      &lt;img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Codepen: <a href="https://codepen.io/HelleFl/pen/KyWYYX" rel="nofollow noreferrer">https://codepen.io/HelleFl/pen/KyWYYX</a></p>