I've posed this question before without receiving any responses, so I'm giving it another shot.
In WordPress, I crafted a navigation menu that utilizes jQuery for a slide down/up animation on submenus. The issue arises when using flexbox on the submenus, which seems to be causing problems. Changing it to block resolves the issue, but it compromises the desired design aesthetic.
The specific problem and how to reproduce it: Upon initially refreshing the page (or running the code on jsfiddle) and hovering over the menu, the submenu slides down past its intended height and then snaps back into place. Subsequent interactions with other submenus function correctly. However, addressing this snap-back behavior would significantly improve the overall appearance.
Does anyone have insights into why this issue occurs and/or potential solutions?
To test the problem yourself, visit the following jsfiddle link: https://jsfiddle.net/u2zs38oL/
Below are the HTML and CSS codes used in the jsfiddle:
HTML:
<header>
<nav class="main-navigation" id="desktop-navigation">
<div class="container-fluid">
<div class="menu-menu-1-container">
<ul id="menu-menu-2" class="d-flex justify-content-center">
...
</ul>
</div>
</div>
</nav>
</header>
CSS:
header .main-navigation {
display: block;
margin-left: 1rem!important;
...
}
...
jQuery:
jQuery(document).ready(function() {
jQuery('.main-navigation .has-mega-menu').hover(function() {
...
});
});