hover drop down nav disappears when moving over margin, javascript & css

Question

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.

css

nav ul li > ul {
    flex-direction: column;
    display: flex;
    width: 100%;
    opacity: 0;
    transition: opacity 1s; 
}

.opacity1 {
    opacity: 1;
    transition: opacity 1s; 
}

javascript

navInnerContainer.children[1].children[1].children[0].addEventListener("mouseover", () => {
      navParent.children[1].classList.add("opacity1");
});
navInnerContainer.children[1].children[1].addEventListener("mouseout", () => {
      navParent.children[1].classList.remove("opacity1");
});

html

 <div class="nav-inner-container">
            <div class="nav-logo">
                <p>Logo</p>
            </div>
       <ul>
           <li>
               <a href="#">Home</a>
           </li>
           <li class="nav-parent">
               <a href="#">Shop</a>
               <ul class="nav-child-ul">
                   <li><a href="#">Computers</a></li>
                   <li><a href="#">Phones</a></li>
                   <li><a href="#">Gaming</a></li>
                   <li><a href="#">Software Licenses</a></li>
                   <li><a href="#">Acessories</a></li>
               </ul>
           </li>
           <li>
               <a href="#">Cart
               <span class="cart-btn">
                   <i class="fa fa-shopping-cart"></i>
               
               <span class="cart-items">0</span>
               </span>
            </a>
           </li>
       </ul>
      </div> 

Things ive tried

navInnerContainer.children[1].children[1].children[0].style.marginBottom.addEventListener("mouseover", () => {
      navParent.children[1].classList.add("opacity1");
});

^ you can't add event listener to a style but something like this would be ideal.

navInnerContainer.children[1].children[1].children[1].addEventListener("mouseover", () => {
      if (navInnerContainer.children[1].children[1].children[1].style.opacity > 0) {
        navParent.children[1].classList.add("opacity1");
      }
});

^ trying to catch it before it fades away.. doesn't work

navParent.children[0].addEventListener("mouseover", () => {
      navParent.children[1].classList.add("opacity1");
      navParent.children[1].classList.add("mouseIsOverParent");
      setTimeout(function(){ 
        if (navChild.classList.contains("mouseIsOverChild") === false) {
           navParent.children[1].classList.remove("mouseIsOverParent");}   }, 3000);     
    });
navParent.addEventListener("mouseout", () => {
      navParent.children[1].classList.remove("opacity1");
    });
navChild.addEventListener("mouseover", () => {
  if (navParent.children[1].classList.contains("mouseIsOverParent")) {
      navParent.children[1].classList.add("mouseIsOverChild");
  } if (navParent.children[1].classList.contains("mouseIsOverChild")) {
     navParent.children[1].classList.add("opacity1");
  }
    });
navChild.addEventListener("mouseout", () => {
  navParent.children[1].classList.remove("mouseIsOverChild");
  navParent.children[1].classList.remove("opacity1");
});

^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.

sorry the codes a mess, I appreciate any help. worse case scenario I can put onto a click event.

Answer 1

may this will help.

const navInnerContainer = document.getElementsByClassName("nav-inner-container")[0];

[...document.querySelectorAll(".nav-inner-container>ul>li")].forEach(li => {
  if (li.childElementCount === 2) {
    li.addEventListener("mouseover", function() {
      this.querySelector(".nav-child-ul").classList.add("opacity1");
    });
    li.addEventListener("mouseout", function() {
      this.querySelector(".nav-child-ul").classList.remove("opacity1");
    });
  }
});

ul li>ul {
  flex-direction: column;
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.opacity1 {
  display: flex;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
<div class="nav-inner-container">
  <div class="nav-logo">
    <p>Logo</p>
  </div>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li class="nav-parent">
      <a href="#">Shop</a>
      <ul class="nav-child-ul">
        <li><a href="#">Computers</a></li>
        <li><a href="#">Phones</a></li>
        <li><a href="#">Gaming</a></li>
        <li><a href="#">Software Licenses</a></li>
        <li><a href="#">Acessories</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Cart
        <span class="cart-btn">
          <i class="fa fa-shopping-cart"></i>

          <span class="cart-items">0</span>
        </span>
      </a>
    </li>
  </ul>
</div>

</body>