title: Animating Navigation Menu Dropdowns at the Same Time
body: <p>I'm attempting to animate my <code>subnav</code> using <code>JavaScript</code>. I want to reveal all <code>subnavs</code>, similar to a 'mega menu' type nav. Right now, it fades in, but from the <code>subnav</code> that's furthest right, causing a gradation effect. I want them all to start at the same time.</p>
  
  <p>How can I make them all animate at the same time? </p>
  
  <p>See <a href="https://codepen.io/ericnguyen23/pen/RzOeEX" rel="nofollow noreferrer">Codepen</a> for <code>HTML</code> and <code>CSS</code></p>
  
  <p>Here's the JS block:</p>
  
  <pre><code>  nav.forEach(elem =&gt; {
      elem.addEventListener('mouseenter', () =&gt; {
        const subnav = document.querySelectorAll('.subnav-block');
        subnav.forEach(sub =&gt; {
          sub.classList.add('display-block');
          setTimeout(() =&gt; {
            sub.style.opacity = 1;
          }, 100);
        });
      });
  
      elem.addEventListener('mouseleave', () =&gt; {
        const subnav = document.querySelectorAll('.subnav-block');
        subnav.forEach(sub =&gt; {
          sub.classList.remove('display-block');
          sub.style.opacity = 0;
        });
      });
    });
  </code></pre>