I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the affix top class, if I hover over the main menu item with the sub-menu, the main menu disappears. Interestingly, this problem only occurs when hovering over the parent div of the sub-menu divs and when the affix top class is active due to scrolling down. However, this issue does not arise when hovering over other main menu items and the affix top class functions properly in those cases. Once you scroll back up, the problem disappears. Any assistance or tips on how to resolve this would be greatly appreciated. Below are the codes I am currently using:
$(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">≡ 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>