title: hover drop down nav disappears when moving over margin, javascript & css
body: <p>My UL for nav has a top margin of 6.4px so it can be centered vertically, when moving mouse from the parent li to the ul that drops down, it disappears when crossing the margin.
  Here is my code and at the bottom I will put things that I've tried.</p>
  <p>css</p>
  <pre><code>nav ul li &gt; ul {
      flex-direction: column;
      display: flex;
      width: 100%;
      opacity: 0;
      transition: opacity 1s; 
  }
  
  .opacity1 {
      opacity: 1;
      transition: opacity 1s; 
  }
  </code></pre>
  <p>javascript</p>
  <pre><code>navInnerContainer.children[1].children[1].children[0].addEventListener(&quot;mouseover&quot;, () =&gt; {
        navParent.children[1].classList.add(&quot;opacity1&quot;);
  });
  navInnerContainer.children[1].children[1].addEventListener(&quot;mouseout&quot;, () =&gt; {
        navParent.children[1].classList.remove(&quot;opacity1&quot;);
  });
  </code></pre>
  <p>html</p>
  <pre><code> &lt;div class=&quot;nav-inner-container&quot;&gt;
              &lt;div class=&quot;nav-logo&quot;&gt;
                  &lt;p&gt;Logo&lt;/p&gt;
              &lt;/div&gt;
         &lt;ul&gt;
             &lt;li&gt;
                 &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;nav-parent&quot;&gt;
                 &lt;a href=&quot;#&quot;&gt;Shop&lt;/a&gt;
                 &lt;ul class=&quot;nav-child-ul&quot;&gt;
                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Computers&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Phones&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Gaming&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Software Licenses&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acessories&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/li&gt;
             &lt;li&gt;
                 &lt;a href=&quot;#&quot;&gt;Cart
                 &lt;span class=&quot;cart-btn&quot;&gt;
                     &lt;i class=&quot;fa fa-shopping-cart&quot;&gt;&lt;/i&gt;
                 
                 &lt;span class=&quot;cart-items&quot;&gt;0&lt;/span&gt;
                 &lt;/span&gt;
              &lt;/a&gt;
             &lt;/li&gt;
         &lt;/ul&gt;
        &lt;/div&gt; 
  </code></pre>
  <p>Things ive tried</p>
  <pre><code>navInnerContainer.children[1].children[1].children[0].style.marginBottom.addEventListener(&quot;mouseover&quot;, () =&gt; {
        navParent.children[1].classList.add(&quot;opacity1&quot;);
  });
  </code></pre>
  <p><strong>^ you can't add event listener to a style but something like this would be ideal.</strong></p>
  <pre><code>navInnerContainer.children[1].children[1].children[1].addEventListener(&quot;mouseover&quot;, () =&gt; {
        if (navInnerContainer.children[1].children[1].children[1].style.opacity &gt; 0) {
          navParent.children[1].classList.add(&quot;opacity1&quot;);
        }
  });
  </code></pre>
  <p><strong>^ trying to catch it before it fades away.. doesn't work</strong></p>
  <pre><code>navParent.children[0].addEventListener(&quot;mouseover&quot;, () =&gt; {
        navParent.children[1].classList.add(&quot;opacity1&quot;);
        navParent.children[1].classList.add(&quot;mouseIsOverParent&quot;);
        setTimeout(function(){ 
          if (navChild.classList.contains(&quot;mouseIsOverChild&quot;) === false) {
             navParent.children[1].classList.remove(&quot;mouseIsOverParent&quot;);}   }, 3000);     
      });
  navParent.addEventListener(&quot;mouseout&quot;, () =&gt; {
        navParent.children[1].classList.remove(&quot;opacity1&quot;);
      });
  navChild.addEventListener(&quot;mouseover&quot;, () =&gt; {
    if (navParent.children[1].classList.contains(&quot;mouseIsOverParent&quot;)) {
        navParent.children[1].classList.add(&quot;mouseIsOverChild&quot;);
    } if (navParent.children[1].classList.contains(&quot;mouseIsOverChild&quot;)) {
       navParent.children[1].classList.add(&quot;opacity1&quot;);
    }
      });
  navChild.addEventListener(&quot;mouseout&quot;, () =&gt; {
    navParent.children[1].classList.remove(&quot;mouseIsOverChild&quot;);
    navParent.children[1].classList.remove(&quot;opacity1&quot;);
  });
  </code></pre>
  <p><strong>^this last ones messy but the most functional, it get's stuck eventually and starts displaying the the drop down when mouse passes over when its supposed to stay invisible.</strong></p>
  <p>sorry the codes a mess, I appreciate any help. worse case scenario I can put onto a click event.</p>