Главное меню исчезает при наведении курсора после применения класса аффикса

Question

Я создаю горизонтальное выпадающее меню под одним из пунктов главного меню. Я хочу, чтобы подменю расширялось при наведении курсора мыши и закрывалось при наведении мыши. Этот эффект работает должным образом, но когда вы прокручиваете вниз и активируется верхний класс аффикса, при наведении курсора на пункт главного меню с элементами подменю главное меню исчезает. Если вы наводите курсор мыши на другие пункты главного меню, это не вызывает никаких проблем, и аффикс высшего класса работает просто отлично. Это происходит только тогда, когда вы наводите курсор мыши на родительский div дивов подменю и прокручиваете его вниз, чтобы активировать верхний класс аффикса . Но если вы прокрутите назад вверх, это там. Любая помощь будет оценена, пожалуйста. Мои коды указаны ниже.

$(document).ready(function(){

var parent = document.getElementById("parent");
var dropdown = document.getElementById("dropdown");
var child = document.getElementById("child")

parent.addEventListener("mouseover", expand);
parent.addEventListener("mouseout", close);
dropdown.addEventListener("mouseover", expand);
dropdown.addEventListener("mouseout", close);

  function expand() {
    parent.style.background = "#aaa";
    parent.style.color = "#fff";
    dropdown.style.background = "#aaa";
    dropdown.style.display = "inline-block";
    mainnav.className = "expand";
  }

  function close() {
    dropdown.style.display = "none";
    parent.style.background = "#817f7f";
    mainnav.className = "";
    
      }
})

#mainnav {
  background: rgb(129, 127, 127);
  color: #333;
  font-weight: bold;
  text-transform:uppercase;
  letter-spacing: .05em;
  z-index: 1000;
  height: 47px;
  transition: .5s ease-in-out;
}
#mainnav.expand {
  height: 94px;
  transition: .5s ease-in-out;
}
#mainnav #menu {
  display: none;
  padding: .8em 1.5em;
  cursor: pointer;
  overflow:hidden;;
}
#mainnav ul {
  display: block;
  margin: 0;
  text-align: right;
}
#mainnav ul li {
  margin: 0;
  list-style: none;
  display: inline-block;
}
#mainnav ul li a {
  color: #fff;
  font-size: .75em;
  text-decoration: none;
  display: inline-block;
  padding: .9em 1.5em .8em 1.5em;  
}

#dropdown > ul li a {
  color: #fff;
  font-size: .75em;
  text-decoration: none;
  display: inline-block;
  padding: .9em 1.5em .8em 1.5em;  
}
#mainnav ul li a:hover {
  color: #000;
  background: #aaa;  
  transition: .5s ease-in-out;
}
#mainnav #child{
  width: 100vw !important;
  margin-left: calc((100% - 100vw) / 2);
  display: block;
  background-color: #aaa;
  text-align: center;
  color:#fff;  
  transition: 1s ease-in-out;
}   
 #mainnav #dropdown {
  display: none;
  overflow:hidden !important;
  height: 100%;
}  


/* STICKY ON SCROLL NAV */

nav.affix {
  top: 0 !important;
  left: 0;
  right: 0;
	width: 100% !important;
} 

<nav id="mainnav" class="group" data-spy = "affix", data-offset-top="100">
          <div class="container">
            <div id="menu">&#x2261; Menu</div>
              <ul class="menu">
                  <li><a href="#">1111</a></li>
                  <li><a href="#">2222</a></li>
                  <li id="parent"><a href="#">3333</a></li>
                  <li><a href="#">4444</a></li>
                  <li><a href="#">5555</a></li>
              </ul>
              <div id="child">
                  <ul id="dropdown">
                    <li class="child"><a href="#">A</a></li>
                    <li class="child"><a href="#">B</a></li>
                    <li class="child"><a href="#">C</a></li>
                    <li class="child"><a href="#">D</a></li>
                    <li class="child"><a href="#">ORM</a></li>
                    <li class="child"><a href="#">E</a></li>
                </ul>
              </div>
            </div>
        </nav>

Answer 1

Не совсем уверен, что вы пытались сделать. Но я думаю, вы хотели создать горизонтальное выпадающее меню с пунктами подменю. Если это так, я предлагаю вам следующий упрощенный код:

HTML:

  <div class="dropdown">
    <button class="dropbtn">1111 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">2222 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">3333 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 7</a>
      <a href="#">Link 8</a>
      <a href="#">Link 9</a>
    </div>
  </div>

</div>

CSS:

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Если это то, что вы имели в виду, я надеюсь, это поможет!